Q&A
jqueryが読み込まれているように見えませんが。。。 これで全部ですか？
jqueryで画像のところをマウスホバーされると下に表示されているtextが色を変わるというコードをjqueryで書いたのですが表示されません。どこが悪いか教えてもらえると助かります
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>Page Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 9 10 11 12<!-- script --> 13 <script src="js/jquery-2.1.3.min.js"></script> 14 <script src="js/jquery-ui.min.js"></script> 15 <script src="js/main.js"></script> 16</head> 17<body> 18 <div class="col-md-4 col-sm-6 col-xs-12 col-cover"> 19 <div class="card-md-4 thumbmnail"> 20 <a href="page/index.html"> 21 <img class="card-img-top imgCss" src="./imgs/IMG1.png" width="100%" alt="Card image cap"> 22 <div class="arrow"> 23 <i class="fas fa-chevron-circle-right"></i> 24 </div> 25 </a> 26 </div> 27 <div class="title-col"> 28 <span class="title">タイトル</span><br> 29 <span class="sub">日付</span> 30 </div> 31 </div> 32<div class="col-md-4 col-sm-6 col-xs-12 col-cover"> 33 <div class="card-md-4 thumbmnail"> 34 <a href="page/index2.html"> 35 <img class="card-img-top imgCss" src="./imgs/IMG2.png" width="100%" alt="Card image cap"> 36 <div class="arrow"> 37 <i class="fas fa-chevron-circle-right"></i> 38 </div> 39 </a> 40 </div> 41 <div class="title-col"> 42 <span class="title">タイトル2</span><br> 43 <span class="sub">日付</span> 44 </div> 45 </div> 46</body> 47</html>
javascript
1 $(function() { 2 $('.thumbmnail').hover( 3 function() 4 { 5 // マウスオーバー時 6 $('.title').stop().animate({color: '#1fcb95'},200); 7 }, 8 function () 9 { 10 // マウスを外した時 11 $('.title').stop().animate({color: '#ffffff'},700); 12 } 13 ); 14});
このコードでやりたいのは'thumbnail'というクラスがホバーされた時'.title'クラスの色が変化するのですが現状titleクラス全部の色が変化してしまいます。ホバーされているthumbnailの要素だけを取得してtitleクラスの色を変化したいです。
回答2件
0
animateをcssに変えてみてください
投稿2018/05/31 03:31
総合スコア114775
0
ベストアンサー
そりゃ、ターゲットを、.titleにしてればそうなりますよね。
以下でいかがでしょうか？
javascript
1$('.thumbmnail').hover( 2 function(){ 3 // マウスオーバー時 4 $(this).parent().find('.title').stop().animate({color: '#1fcb95'},200); 5 }, 6 function (){ 7 // マウスを外した時 8 $(this).parent().find('.title').stop().animate({color: '#ffffff'},700); 9 } 10); 11
.thumbmnailの親からたどった.titleをターゲットにするようにしました。
あと、このままでカラーのアニメーションききますかね？
jQueryって、プラグイン使わないと、色のアニメーションきかせられなかったような・・・。
（↑もしかしたら古い知識かも）
投稿2018/05/31 03:31
総合スコア9528
ありがとうございます。無事実装できました。
選択されている要素の取得は今後も使えるので感謝です
一応animateでもできたのですが他の人の回答のようにcssにしました
あなたの回答
tips
プレビュー
