Question

我有一个带有CSS的菜单，可以在悬停时使每个项目模糊：

    {<style>
a.blur
{
text-decoration: none;
color: #128;
}

a.blur:hover, a.blur:focus
{
    text-decoration: underline;
    color: #933;
}

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
    text-decoration: none;
    color: rgba(0,0,0,0);
    outline: 0 none;
    -webkit-transition: 100ms ease 50ms;
    -moz-transition: 100ms ease 50ms;
    transition: 100ms ease 50ms;
}

.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
    text-shadow: 0 0 4px #989898;
    font-size:24px;
}

.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
    text-shadow: 0 0 0 #000;
}
</style>}

现在每个项目在悬停时都会模糊，我的问题是，是否有任何方法可以使其他项目模糊，而正在盘旋的项目保持专注？ ..我不希望所有的项目最初都是模糊的，它们都应该是正常的，直到一个项目被徘徊然后所有其他项目变得模糊，并且在鼠标保持时，它们都应该聚焦并恢复正常。

感谢

Answer 1

我认为你要找的是jquery mouseover事件：

http://www.w3schools.com/jquery/event_mouseover.asp

从那里你可以编辑元素的样式 ...该教程中的编码示例给出了：

$("p").mouseover(function(){
    $("p").css("background-color", "yellow");
});

您的代码可能看起来像

$("a").mouseover(function(){
    $("body").css("text-shadow", "0 0 0 #000");
});

我不熟悉模糊风格的属性，但我希望这能回答你的问题......

Answer 2

当然，你可以使用jQuery轻而易举。

jsFiddle：http://jsfiddle.net/7ytnb118/

$('ul li').on('mouseover',function(){
    $('ul li').not($(this)).css('text-shadow',' 2px 2px #989898');
  })

  $('ul li').on('mouseout',function(){
    $('ul li').not($(this)).css('text-shadow','none');
  })

如果您在代码看起来有点神秘之前从未见过jQuery，但是一旦掌握了它，就有点像体验必杀技。

简单的解释是每个li都有一个悬停监听器。在悬停时，除了之外的每个li 都会变得模糊。 unhovering的真实性是相同的，也就是躲避。

模拟悬停菜单

2 个答案: