質問編集履歴
1
コードの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -243,3 +243,73 @@
|
|
|
243
243
|
エディタ:VScode
|
|
244
244
|
|
|
245
245
|
ブラウザ:クローム
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
###追加修正を受けての追記
|
|
252
|
+
|
|
253
|
+
追加修正を受けまして、以下のようにしてみたところ、hoverしてもやはり表示されませんでした。
|
|
254
|
+
|
|
255
|
+
```js
|
|
256
|
+
|
|
257
|
+
$(function () {
|
|
258
|
+
|
|
259
|
+
//画像のキャプション表示
|
|
260
|
+
|
|
261
|
+
//「style-item」というクラスを持ちかつ、liの最後の要素にdivを追加する
|
|
262
|
+
|
|
263
|
+
$("li" + ".style-item").append("<div>");
|
|
264
|
+
|
|
265
|
+
//そのなかにdiv
|
|
266
|
+
|
|
267
|
+
$("li" + ".style-item").each(function() {
|
|
268
|
+
|
|
269
|
+
//画像のキャプションを取得
|
|
270
|
+
|
|
271
|
+
//自分(div)からみて親要素(li)の子要素(img)のalt属性
|
|
272
|
+
|
|
273
|
+
//$(this).parent().children("img").attr("alt");
|
|
274
|
+
|
|
275
|
+
//それを取得したキャプション用にテキストをp要素としてdiv要素内におさめる
|
|
276
|
+
|
|
277
|
+
const alt = $(this).children("img").attr("alt");
|
|
278
|
+
|
|
279
|
+
console.log(alt);
|
|
280
|
+
|
|
281
|
+
$(this).children("div").html("<p>" + alt + "</p>");
|
|
282
|
+
|
|
283
|
+
//$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
|
|
284
|
+
|
|
285
|
+
});
|
|
286
|
+
|
|
287
|
+
//マウスオーバーした時の処理
|
|
288
|
+
|
|
289
|
+
$("li").hover(function () {
|
|
290
|
+
|
|
291
|
+
//マウスオーバー時の処理
|
|
292
|
+
|
|
293
|
+
//フェードイン
|
|
294
|
+
|
|
295
|
+
$(this).children("div").stop().fadeIn(300);
|
|
296
|
+
|
|
297
|
+
//キャプションのテキスト位置:10pxから0pxへ移動
|
|
298
|
+
|
|
299
|
+
$(this).children("div").children("p").stop().animate({ "top": 0 }, 300);
|
|
300
|
+
|
|
301
|
+
console.log('hover')
|
|
302
|
+
|
|
303
|
+
//マウスアウト時の処理
|
|
304
|
+
|
|
305
|
+
}, function () {
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
});
|
|
310
|
+
|
|
311
|
+
});
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
|
|
315
|
+
```
|