Html 答：悬停模糊效果（使用文本阴影）对所有东西，但悬停的链接？

我已经看到了一些对此的回应，但很难将其整合到我的代码中

所以现在，悬停上的字母会模糊，但是我怎样才能使其他字母模糊，而悬停上的字母保持在焦点上呢

沿着这些路线

这是我的密码

//如果支持，将textshadow类附加到HTML节点（Modernizer也会这样做）
if（document.createElement（“detect”）.style.textShadow==“”）{
document.getElementsByTagName（“html”）[0].className+=“textshadow”；
}

正文
{	
背景色：#eee；
文本阴影：12px 12px 8px#000000；
字体大小：30px；
颜色：白色；
}
.text阴影a.blur，
.text阴影a.blur.out:悬停，
.text阴影a.blur.out：聚焦
{
文字装饰：无；
颜色：rgba（0,0,0,0）；
大纲：0无；
-webkit转换：400ms轻松100ms；
-moz转换：400ms，100ms；
转换：400ms到100ms；
文本阴影：0 0 5px白色，12px 12px 8px 000000；
}
.text阴影a.blur.out，
.text阴影a.blur:悬停，
.text阴影a.blur：聚焦
{
文字装饰：无；
颜色：rgba（0,0,0,0）；
大纲：0无；
-webkit转换：400ms轻松100ms；
-moz转换：400ms，100ms；
转换：400ms到100ms；
文本阴影：0白色，12px 12px 8px#000000；
}
a:链接{
文字装饰：无；
}
a:参观了{
文字装饰：无；
颜色：白色；
}
a:悬停{
文字装饰：无；
}
a:主动的{
文字装饰：无；
}

---

诀窍是捕捉父事件上的悬停事件，然后选择所有未悬停的子事件。您可以通过执行以下操作来实现此目的：

。父对象：悬停子对象：非（：悬停）

这是我在下面的片段中唯一更改的内容。但是，您应该注意，代码中的父部分使用整个宽度，因此当鼠标悬停在文本的右侧时，所有内容都会变得模糊。但我猜你的布局不是最终的，而且无论如何都是水平的（比如菜单），这不是问题

//如果支持，将textshadow类附加到HTML节点（Modernizer也会这样做）
if（document.createElement（“detect”）.style.textShadow==“”）{
document.getElementsByTagName（“html”）[0].className+=“textshadow”；
}

正文
{	
背景色：#eee；
文本阴影：12px 12px 8px#000000；
字体大小：30px；
颜色：白色；
}
.text阴影a.blur，
.basilswan:hover a.blur.out:not（：hover）
{
文字装饰：无；
颜色：rgba（0,0,0,0）；
大纲：0无；
-webkit转换：400ms轻松100ms；
-moz转换：400ms，100ms；
转换：400ms到100ms；
文本阴影：0 0 5px白色，12px 12px 8px 000000；
}
.text阴影a.blur.out，
.text阴影a.blur:悬停，
.text阴影a.blur：聚焦
{
文字装饰：无；
颜色：rgba（0,0,0,0）；
大纲：0无；
-webkit转换：400ms轻松100ms；
-moz转换：400ms，100ms；
转换：400ms到100ms；
文本阴影：0白色，12px 12px 8px#000000；
}
a:链接{
文字装饰：无；
}
a:参观了{
文字装饰：无；
颜色：白色；
}
a:悬停{
文字装饰：无；
}
a:主动的{
文字装饰：无；
}

谢谢Tobias！好的，我已经把它应用到我们正在处理的页面上了。。（已应用于“罗勒天鹅”字母，可能需要刷新几次才能找到它）。。解决了鼠标位于右手边的问题，但动画现在似乎只在on方向工作（鼠标打开，而不是鼠标关闭）。。模糊正在工作。。但是第二个静态阴影在悬停时有点小瑕疵，在动画预定的400毫秒内消失。。在测试页面上没有发生什么？您可以添加

转换：400ms轻松100ms

到

a

标记，这使得“悬停关闭”事件的转换工作正常。我想知道为什么您要使用

文本阴影

属性实现模糊。。。在我看来，最好在用户未悬停的所有链接上设置

filter:blur（5px）

，并完全消除

文本阴影。这将解决您描述的故障问题。。。