我试图理解它们,但似乎我不能。所以我想如果有人可以帮助我更好地了解这些是如何工作的。
当我添加悬停状态时,它只是对鼠标是否在元素上或鼠标离开元素时产生不透明度效果......它重复它...
mouseenter&leave 工作正常,但我不知道如何告诉他一次 $(这个),所以我做了一些东西,它有效,但也许有人可能会告诉我什么是正确和更好的方法。
$("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);
});
您可以组合事件处理程序:
$("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);
})
如果你有选择,我会用CSS来做这件事。
使用 CSS 的 :hover
属性的示例代码
.CSS
div{
width: 100px;
height: 100px;
background-color: blue;
opacity: .5;
}
div:hover{
opacity: 1;
}
例
否则,@undefined的解决方案就是您正在寻找的=)