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

来自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
   }

);

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

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

4 个答案: