jQuery hover - 按钮保持悬停效果

Posted 2023-05-08

【中文标题】jQuery hover - 按钮保持悬停效果

【英文标题】：jQuery hover - button stays to be with hover effect

【发布时间】：2013-08-28 17:14:41

【问题描述】：

$("#navigation li.active").next().hover(function() 
   $(this).css("box-shadow", "inset -4px 0 7px -5px black");
);

当我从按钮释放光标时，按钮保持悬停效果。能否请您说一下如何制作正常的悬停效果，必须在光标在按钮上时显示。

【问题讨论】：

您可以创建一个 CSS 类并改用 jQuery toggleClass 方法。 $(this).toggleClass('box-shadow').

【参考方案1】：

您需要添加鼠标离开处理程序

$("#navigation li.active").next().hover(function() 
   $(this).css("box-shadow", "inset -4px 0 7px -5px black");
, function()
   $(this).css("box-shadow", "");
);

【参考方案2】：

使用 hover() 中可用的第二个函数：

$("#navigation li.active").next().hover(function() 
   $(this).css("box-shadow", "inset -4px 0 7px -5px black");
 , 
function() 
   $(this).css("box-shadow", "reset here. this is mouse out");
);

【参考方案3】：

来自Jquery Docs of Hover()

.hover() 方法在传递单个函数时，将为 mouseenter 和 mouseleave 事件执行该处理程序。

所以，你的一个函数为这两个事件执行。悬停完成后您需要将其删除

$("#navigation li.active").next().hover(
function() 
   $(this).css("box-shadow", "inset -4px 0 7px -5px black");
,

 function() 
    //make your element normal here
   

);

【参考方案4】：

我相信其他人的答案对你有用，但实际上使用 css 更容易。

#navigation li:hover  box-shadow: inset -4px 0 7px -5px black; 
#navigation li.active:hover  box-shadow: none; 

如果你必须使用 javascript 来做到这一点，它是

$("#navigation li.active").next().hover(function() 
   $(this).css("box-shadow", "inset -4px 0 7px -5px black");
, function()
   $(this).css("box-shadow", "none");
);