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

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

使用悬停可用第二个函数（）：

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