jQuery hover、mouseenter、mouseleave 状态（不透明动画）

Posted 2023-05-09

【中文标题】jQuery hover、mouseenter、mouseleave 状态（不透明动画）

【英文标题】：jQuery hover, mouseenter, mouseleave state (opacity animate)

【发布时间】：2012-09-25 12:09:29

【问题描述】：

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

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

而且 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);
);

【参考方案1】：

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

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

【讨论】：

他们都工作正常...感谢他们俩！我会玩各种不同的东西。干杯。

【参考方案2】：

如果您可以选择，我会使用 CSS 来实现。

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

CSS

div
    width: 100px;
    height: 100px;
    background-color: blue;                
    opacity: .5;

div:hover
    opacity: 1;

EXAMPLE

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

【讨论】：

是的，我只是不想使用过渡来缓解。谢谢你+1 :)

啊，在这种情况下@undefined 是对的。 jquery中的hover方法可以接受2个函数（第一个是mouseenter，第二个是mouseleave）.hover( handlerIn(eventObject), handlerOut(eventObject) )。 api.jquery.com/hover