【jQuery】divをマウスオーバーすると色を付け、リンクを張る方法

http://teapipin.blog10.fc2.com/blog-entry-567.html【jQuery】divをマウスオーバーすると色を付け、リンクを張る方法

divをマウスオーバーすると色を付け、リンクを張る方法についてです。

 

このブログでは、トップページの各記事へのリンクに使っています。 

 

 

方法

 

まず、対象となるdivにクラスを設定しておきます。（この例ではgrid_content）

<div class="grid_content">～</div>

 

次にjQueryを使って次のように記述します。

//divをマウスオーバーするとeb_hoverクラスを付け、マウスが外れるとクラスも取り除く 
$(function(){
  $(".grid_content").hover(function(){
    $(this).addClass("eb_hover")
  },function(){
     if($(this).hasClass("eb_hover")){
     $(this).removeClass("eb_hover")
    }
  })

//エリア内のaタグのリンク先を取得してそのリンク先へ移動
  $(".grid_content").click(function(){
    location.href = $(this).find("a").eq(0).attr("href");
  })
});

CSSでは次のように設定します。

/* マウスオーバーしたときの背景色 */
.eb_hover{
   background:#ffffea !important;
}

/* マウスオーバーしたときカーソルをポインタに */
.grid_content{
  cursor:pointer;
}

↓この記事が参考になったら拍手（どなたでも可）、ツイート、いいね、はてブ、いずれかをお願いします。 今後のブログ作りに役立てたいので。