jquery - jQueryによるテキストブラー効果

Question

次の構造のテキストリストがあります。

<div class="text">
<a href="/node/30">Site Text</a>
</div>

マウスを1つのリストアイテムの上に置いたときに、他のリストアイテムのぼかし効果を取得したいと思います。

http://tympanus.net/Tutorials/ItemBlur/に表示されているのと同じ効果を取得したいと思います。

どのようにできるのか？

Answer 1

これらの例を確認してください。

はい。ただし、ここではテキストをぼかすことができるだけで、他のものはぼかすことができません。（css 2の場合）

しかし、css3では他のものもぼかすことができます。

例1

例2

編集：

これをチェックしてください：

<style>
 .hello{color:transparent; text-shadow:0 0 0 #000; font-size:20px;}
 .hello div{float:left; margin:10px;}
 .hello:hover div{text-shadow:0 0 10px #000;}
 .hello:hover div:hover{text-shadow:0 0 0 #000;}
 </style>
  <div class="hello">
    <div>
        new1
    </div>
    <div>
        new2
    </div>
    <div>
        new3
    </div>
    <div>
        new4
    </div>
  </div>

これは単純なcssベースの効果です。それを使用してお楽しみください;）

Answer 2

試す：

$('.text a').blur(function() {
    //Add your styles
}

Answer 3

これを試してみてください：-

$("#ElementID").hover(function(){
  $("#OtherElementId").blur();
});