[jQuery] マウスが乗っていない要素に効果をつける

web

jQueryのnot()メソッドを使用して、マウスが乗っていない要素がぼやけるような効果をつけてみます。

デモはこちら

ソース

HTML

<ul id="fade">
    <li><a href="">link1</a></li>
    <li><a href="">link2</a></li>
    <li><a href="">link3</a></li>
    <li><a href="">link4</a></li>
</ul>

CSS

#fade{
    width: 350px;
    margin: 50px auto;
    font-size: 20px;
}
#fade li{
    display: inline-block;
    margin-left: 30px;
}
#fade a{
    color: #999;
    text-decoration: none;
    font-weight: bold;
    -webkit-transition: all 0.3s linear; /*フェード用*/
    -moz-transition: all 0.3s linear; /*フェード用*/
    -o-transition: all 0.3s linear; /*フェード用*/
    transition: all 0.3s linear; /*フェード用*/
}
#fade a.blur{
    color: transparent; /*文字色を無色にする*/
    text-shadow: 0 0 3px rgba(0,0,0,0.3); /*影をつける*/
}

マウスオンした要素に付与されるblurクラスがポイントです。
colortransparent、つまり無色にして、薄いtext-shadowをつけてやることでぼけているかのように見せています。

jQuery

$(window).load(function(){
    var fade = $("#fade a");
    fade.hover(function(){
        fade.not(this).addClass("blur"); //マウスオンしたらblurクラスを付与
    },function(){
        fade.not(this).removeClass("blur"); //マウスアウトしたらblurクラスを削除
    });
});

jQueryは簡素。not()メソッドを使って、this以外のli要素にblurクラスを付与しているだけです。