:hoverで無理な時にjQueryのmouseoverを使ってマウスオーバーを簡単に実装するやり方

トップページの記事一覧にマウスオーバー効果を実装しました。
実装にはjQueryを使用しました。
 

マウスオーバーといえば、cssのhoverという疑似クラスがおなじみですが、実務で使っているとなかなか自由度が低く扱いづらいなぁと感じていました。
このサイトのトップページなんかもまさにhoverが使いにくいです。

この一覧部分にマウスが乗った場合に、見出しの文字の色と画像の枠の色を変えたいなぁと思ったとしても、hoverだとマウスを乗せた場所以外のスタイルを変更することができません。

結果、画像の上に乗せたら画像の枠の色は変わるけど見出しの色は変わらず、また、見出しの上に乗せたら見出しの色は変わるけど画像の色は変わらずというチグハグな効果しかつけることができないのです。

JavaScriptライブラリであるjQueryであればその辺も細かく指定することができます。

コードはこういう感じです。
※分かりにくくなるので、phpからhtmlに直しています。

html

<a href="">
　　　<div class="post-list">
　　　　　　<div class="circle-img"><!--ここに画像が入ります--></div>
　　　　　　<div class="list-right">
　　　　　　　　　<p class="list-date"><!--ここに日付が入ります。--></p>
　　　　　　　　　<p class="list-title"><!--ここに見出しが入ります。--></p>
　　　　　　　　　<p class="list-intro"><!--ここに抜粋が入ります。--></p>
　　　　　　</div>
　　　　　　<div class="clear"></div>
　　　</div>
</a>

JavaScript

<script>
   $(function(){
      $('.post-list').mouseover(function(){
         //マウスオーバー時の処理を記載、複数記載することが可能
         $('.circle-img',this).css('border','solid #ff92ad 3px');
         $('.list-title',this).css('color','#ff92ad');
      }).mouseout(function(){
         //マウスアウト時の処理を記載
         $('.circle-img',this).css('border','solid #36d9d9 3px');
         $('.list-title',this).css('color','#36d9d9');
      });
   });
</script>

これでOKです！

こんな感じで、ボックスの上にマウスを乗せれば、枠と見出しの両方に効果を与えることができました！
 

またアニメーションをつけたい場合には、css3のtransitionプロパティを追加で記載してあげれば大丈夫です。
その場合JavaScriptは以下のようになります。
 

JavaScript

<script>
   $(function(){
      $(".post-list").mouseover(function(){
         $(".circle-img",this).css('border','solid #ff92ad 3px');
         $(".circle-img",this).css('transition','border-color 0.05s linear');
         $(".list-title",this).css('color','#ff92ad');
         $(".list-title",this).css('transition','color 0.05s linear');
      }).mouseout(function(){
         $(".circle-img",this).css('border','solid #36d9d9 3px');
         $(".circle-img",this).css('transition','border-color 0.05s linear');
         $(".list-title",this).css('color','#36d9d9');
         $(".list-title",this).css('transition','color 0.05s linear');
      });
   });
</script>

JQueryはプラグインが充実しているので、コピペで実装できることも多いですが、こういうプラグインに頼るまでもなさそうな部分は自分で書いていきたいですね！