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