[jQuery] マウスが乗っていない要素に効果をつける
webjQueryの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
クラスがポイントです。
color
をtransparent
、つまり無色にして、薄い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
クラスを付与しているだけです。