質問編集履歴
1
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -120,4 +120,39 @@
|
|
|
120
120
|
|
|
121
121
|
OS:Windows
|
|
122
122
|
エディタ:VScode
|
|
123
|
-
ブラウザ:クローム
|
|
123
|
+
ブラウザ:クローム
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
###追加修正を受けての追記
|
|
127
|
+
追加修正を受けまして、以下のようにしてみたところ、hoverしてもやはり表示されませんでした。
|
|
128
|
+
```js
|
|
129
|
+
$(function () {
|
|
130
|
+
//画像のキャプション表示
|
|
131
|
+
//「style-item」というクラスを持ちかつ、liの最後の要素にdivを追加する
|
|
132
|
+
$("li" + ".style-item").append("<div>");
|
|
133
|
+
//そのなかにdiv
|
|
134
|
+
$("li" + ".style-item").each(function() {
|
|
135
|
+
//画像のキャプションを取得
|
|
136
|
+
//自分(div)からみて親要素(li)の子要素(img)のalt属性
|
|
137
|
+
//$(this).parent().children("img").attr("alt");
|
|
138
|
+
//それを取得したキャプション用にテキストをp要素としてdiv要素内におさめる
|
|
139
|
+
const alt = $(this).children("img").attr("alt");
|
|
140
|
+
console.log(alt);
|
|
141
|
+
$(this).children("div").html("<p>" + alt + "</p>");
|
|
142
|
+
//$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
|
|
143
|
+
});
|
|
144
|
+
//マウスオーバーした時の処理
|
|
145
|
+
$("li").hover(function () {
|
|
146
|
+
//マウスオーバー時の処理
|
|
147
|
+
//フェードイン
|
|
148
|
+
$(this).children("div").stop().fadeIn(300);
|
|
149
|
+
//キャプションのテキスト位置:10pxから0pxへ移動
|
|
150
|
+
$(this).children("div").children("p").stop().animate({ "top": 0 }, 300);
|
|
151
|
+
console.log('hover')
|
|
152
|
+
//マウスアウト時の処理
|
|
153
|
+
}, function () {
|
|
154
|
+
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
```
|