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悬停时，将所有opacity:1设置为li。

我怎样才能做到这一点？

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/

Answer 2

您可以为ul元素创建一个新类，这将导致所有lis 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/

Answer 3

这是你想要的吗？

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

Answer 4

你不能只改变处理程序功能中的选择器吗？改变这个......

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

到此......

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

如何检测当前有哪些元素有mouseenter有效？

4 个答案: