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

UPDATE:2013年11月9日

マウスオーバー効果を表した図。つーかこれが限界。

:hoverのマウスオーバー処理ではかゆいところに手が届かない。

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

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

スクリーンショット_2013-11-09_18.50.59-12

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

スクリーンショット_2013-11-09_19.02.28-11

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

jQueryのmouseoverメソッドを使用する。

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です!

スクリーンショット 2013-11-09 19.52.03

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

またアニメーションをつけたい場合には、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はプラグインが充実しているので、コピペで実装できることも多いですが、こういうプラグインに頼るまでもなさそうな部分は自分で書いていきたいですね!

Recommend Post

Comment

コメントを残す

About me

@drox_um
25歳の2年目フロントエンドエンジニア。WEBと音楽が好き。最近カメラを買いました。お仕事募集中。

Ranking