jQuery hover - 按钮保持悬停效果答案

【问题标题】：jQuery hover - button stays to be with hover effectjQuery hover - 按钮保持悬停效果
【发布时间】：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').

标签： jquery navigation hover release

【解决方案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");
});

【讨论】：