Javascript 如何检测当前是否有任何元素的mouseenter处于活动状态？

所以基本上，我有一个未排序的列表，大约有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>

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

我想设置所有

li

的样式，使其在没有

li

悬停时具有

opacity:1

---

如何实现这一点？

您可以为ul元素创建一个新类，该类将导致所有lis 100%不透明。然后，在悬停li时，从ul（其父级）中删除该类

如果我听起来很困惑，我会给你一个密码

请注意，我已经添加了一个CSS转换，我建议您使用CSS完成所有转换（这样您就不必处理覆盖所有其他转换的内联规则）

---

以下是我的想法：

您可以为ul元素创建一个新类，该类将使所有li都100%不透明。然后，在悬停li时，从ul（其父级）中删除该类

如果我听起来很困惑，我会给你一个密码

请注意，我已经添加了一个CSS转换，我建议您使用CSS完成所有转换（这样您就不必处理覆盖所有其他转换的内联规则）

这就是我的想法：

这就是你想要的吗

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

这是你想要的吗

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

---

你不能仅仅改变处理函数中的选择器吗？改变这个

$(this).animate({'opacity': '1'},100,'easeOutBack');

对此

$('li').animate({'opacity': '1'},100,'easeOutBack');

---

你不能仅仅改变处理函数中的选择器吗？改变这个

$(this).animate({'opacity': '1'},100,'easeOutBack');

对此

$('li').animate({'opacity': '1'},100,'easeOutBack');

---

如果我理解正确的话，您可以只使用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;
}

---

演示：

如果我理解正确，您可以只使用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;
}

---

---

演示：

将一个单独的回调绑定到

ul

的

mouseleave

事件。很抱歉，不清楚您在看什么for@tewathia是这样吗<代码>$（'ul'）.bind（'mouseenter'，function（）{DO styleing HERE}）加载页面时，您希望不透明度为.7或1，如果项目悬停，则您希望该元素具有不透明度1和其他。7当鼠标离开时，您希望不透明度为1again@ArunPJohny-点击将单独的回调绑定到

ul

的

mouseleave

事件。抱歉，不清楚您在看什么for@tewathia是这样吗<代码>$（'ul'）.bind（'mouseenter'，function（）{DO styleing HERE}）加载页面时，您希望不透明度为.7或1，如果项目悬停，则您希望该元素具有不透明度1和其他。7当鼠标离开时，您希望不透明度为1again@ArunPJohny-在

ul

@fizzix的左边发现一辆小马车我相信这是因为它在等待JS动画完成，然后运行CSS转换。快速移动鼠标时非常明显。这就是为什么我建议了一个完全CSS的解决方案，如果可能的话。删除了ul填充，现在看起来还行（Chrome/Linux）。在

ul

@fizzix离开后出现了一些小问题，我相信这是因为它等待JS动画完成，然后运行CSS转换。快速移动鼠标时非常明显。这就是为什么我建议了一个完全CSS的解决方案，如果可能的话。删除了ul填充，现在看起来还行（Chrome/Linux）。错过了添加jquery和jquery ui；）。好的，如果您将动画时间更改为1毫秒，则效果相当好（添加jquery和jquery ui；）。嗯，如果你把动画时间改为1毫秒，效果相当好，我认为这很可能是最好的解决方案，也是目前为止最快的。我将需要构建我的代码以适应这种情况，但这是可行的。而且，从来都不知道在CSS中可以访问

ease-in-out

。谢谢是的，如果可以的话，总是使用CSS制作动画。我认为这很可能是最好的解决方案，也是最快的解决方案。我将需要构建我的代码以适应这种情况，但这是可行的。而且，从来都不知道在CSS中可以访问

ease-in-out

。谢谢是的，如果可以的话，总是使用CSS制作动画。