質問編集履歴
1
打ち直しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
画像がflexboxで並んでいて画像にホバーするとキャプションが出るようにしたいのですがうまくいきません。以下のコードでおかしなところがあるでしょうか。
|
|
2
2
|
|
|
3
|
+
|
|
3
|
-
|
|
4
|
+
```HTML
|
|
4
|
-
<section id="works">
|
|
5
|
+
コード<section id="works">
|
|
5
6
|
<h2 class="effect-fade"><img src="images/works.png"></h2>
|
|
6
7
|
<ul class="flexcontainer">
|
|
7
8
|
<li class="flexitem effect-fade"><img src="images/fiction2.png" width="" height="" alt=""></li>
|
|
@@ -18,7 +19,8 @@
|
|
|
18
19
|
</ul>
|
|
19
20
|
</section>
|
|
20
21
|
|
|
22
|
+
```
|
|
21
|
-
|
|
23
|
+
```CSS
|
|
22
24
|
.flexcontainer {
|
|
23
25
|
display: flex;
|
|
24
26
|
flex-flow: row wrap;
|
|
@@ -62,7 +64,8 @@
|
|
|
62
64
|
top: 10px;
|
|
63
65
|
}
|
|
64
66
|
|
|
67
|
+
```
|
|
65
|
-
|
|
68
|
+
```jquery
|
|
66
69
|
$(.flexcontainer li).hover(){
|
|
67
70
|
|
|
68
71
|
$(this).append("<div><p>" + $(this).children("img").attr("alt") + "</p></div>");
|
|
@@ -79,4 +82,5 @@
|
|
|
79
82
|
$(this).parent("div").remove();
|
|
80
83
|
}); //アニメーション事後処理
|
|
81
84
|
}; //マウスアウト時の処理
|
|
82
|
-
});
|
|
85
|
+
});
|
|
86
|
+
```
|