javascript - 如何检测当前是否有任何元素激活了 mouseenter？

Question

基本上，我有一个包含大约 12 个列表项的无序列表。我想在鼠标悬停在其中任何一个上时对它们应用一种样式，而在鼠标不在任何一个上时应用不同的样式。

例如，以下是我当前的代码，它只有在悬停 li 时才具有样式。

HTML:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>

jQuery:

$('li').bind('mouseenter',function(){
    $(this).animate({'opacity': '1'},100,'easeOutBack');
});
$('li').bind('mouseleave',function(){
    $(this).animate({'opacity': '0.7'},600,'easeOutBack');
});

DEMO

当没有 li 悬停时，我想将所有 li 设置为 opacity:1。

我怎样才能做到这一点？

Answer 1

您只能使用 CSS 执行此操作，如果我理解正确的话，您希望在没有悬停时所有项目都处于完全不透明状态，并且在悬停的项目上具有完全不透明度，而在其余项目上具有较低的不透明度。这是一个仅使用 CSS 的示例:

li {
  opacity: 1;    
}

li:hover {
  opacity: 1 !important;
  transition: opacity .3s ease-in-out;
}

ul:hover li {
  opacity: .5;
  transition: opacity .3s ease-in-out;
}

演示: http://jsfiddle.net/Sbgn8/2/