jquery - jQuery hover - 按钮保持悬停效果

Question

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

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

Answer 1

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

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

Answer 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");
});

Answer 3

来自Hover() 的 Jquery Docs

.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
   }

);

Answer 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");
});