通过 jQuery 实现文本模糊效果答案

【问题标题】：Text blur effect via jQuery通过 jQuery 实现文本模糊效果
【发布时间】：2012-06-07 12:37:41
【问题描述】：

我有一个结构如下的文本列表：

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

当鼠标悬停在一个列表项上时，我想为其他列表项获得模糊效果。

我想获得与http://tympanus.net/Tutorials/ItemBlur/ 相同的效果。

我该怎么办？

【问题讨论】：

标签： jquery drupal blur

【解决方案1】：

嘿，看看这些例子：

是的，但你只能在这里模糊文本而不是其他东西。（在 css 2 中）

但在 css 3 中也可以模糊其他内容。

Example 1

Example 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 的效果，使用它并享受它；）

【讨论】：

谢谢，但我不明白。示例 1，对所有文本进行模糊效果。
???!!!!实际上，诀窍是您必须只删除文本的颜色并仅依靠文本阴影来获得效果。
是的，它可以工作，但适用于所有文本。我希望，当鼠标悬停在一个元素上时，其他元素获得模糊效果。
okh 使用 javascript 事件 onmousehover 和 onmouseout 然后根据您的需要更改每个其他元素的类......并注意：http://www.howtocreate.co.uk/textshadow.html 使用前。
但我不改变其他元素类。我可以分开 myclass:hover 和 myclass 吗？当激活 myclass:hover 时，获得模糊效果 myclass？

【解决方案2】：

试试：

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

【讨论】：

jQuery 的blur() 与OP想要的效果无关；这是一个事件活页夹...api.jquery.com/blur

【解决方案3】：

试试这个：-

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

【讨论】：

jQuery 的blur() 与OP想要的效果无关；这是一个事件活页夹...api.jquery.com/blur