如何检测当前是否有任何元素具有活动的mouseenter

How to detect if any elements currently have mouseenter active?

本文关键字：元素 任何 活动 mouseenter 是否 何检测 检测      更新时间：2023-09-26

基本上，我有一个无序列表，大约有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');
});

我想样式所有的li有opacity:1时，没有li被悬停。

我怎样才能做到这一点?

你可以用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/

这是你想要的吗?

$('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');
})

您可以为ul元素创建一个新类，使所有列表100%不透明。然后，在悬停一个li时，将该类从它的父类(ul)中移除。

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

注意，我已经添加了一个CSS过渡，我建议你使用CSS来完成它们(这样你就不必处理覆盖所有其他的内联规则)。

$('li').bind('mouseenter',function(){
    $(this).animate({'opacity': '1'},100);
    $(this).parent().removeClass('full');
});
$('li').bind('mouseleave',function(){
    $(this).animate({'opacity': '0.7'},600, function(){
        $(this).css('opacity', '')
    });
    $(this).parent().addClass('full');
});

这是我的想法:http://jsfiddle.net/fqVT8/1/

你不能改变handler函数中的选择器吗?改变这种…

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

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

相关文章：