2

我试图理解他们，但似乎我做不到。所以我想是否有人可以帮助我更好地理解这些工作原理。

当我添加悬停状态时，无论鼠标在元素上还是鼠标离开元素时，它都会产生不透明效果......它会重复......

而且 mouseenter&leave 工作正常，但我不知道如何告诉他一次 $(this) 所以我做了一些东西并且它有效，但也许有人可能会告诉我什么是正确和更好的方法。

$("nav.topMenu-left li, nav.topMenu-right li").on('mouseenter', function() {
    $(this).animate({'opacity': '0.5'}, 100);
});

$("nav.topMenu-left li, nav.topMenu-right li").on('mouseleave', function() {
    $(this).animate({'opacity': '1'}, 100);
});
4

2 回答 2

2

您可以组合您的事件处理程序：

$("nav.topMenu-left li, nav.topMenu-right li").on('mouseenter mouseleave', function(e) {
   if (e.type === 'mouseenter')
      $(this).animate({'opacity': '0.5'}, 100);
   else 
      $(this).animate({'opacity': '1'}, 100);   
});

或者由于您没有委托事件，您可以使用hover方法：

$("nav.topMenu-left li, nav.topMenu-right li").hover(function(){
    $(this).animate({'opacity': '0.5'}, 100);
}, function(){
    $(this).animate({'opacity': '1'}, 100);   
})
于 2012-10-04T12:46:06.653 回答
1

如果你有选择，我会用 CSS 来做这件事。

:hover使用 CSS属性的示例代码

CSS

div{
    width: 100px;
    height: 100px;
    background-color: blue;                
    opacity: .5;
}
div:hover{
    opacity: 1;
}

例子

否则，@undefined 的解决方案就是您要寻找的 =)

于 2012-10-04T12:49:55.333 回答