我想在懸停元素時執行代碼。當指針消失時，我不想發生任何事情。此代碼正是我想要的：僅在mouseover（或mouseout）上執行代碼的最佳做法
$('li').hover(function() {
// actions here
},
function() {
});
$('ul').hover(function() {
},
function() {
// other actions here
});
但它很醜。我期待這個版本的清潔工作：
$('li').mouseover(function() {
// actions here
});
$('ul').mouseout(function() {
// other actions here
});
但事實並非如此。當我將指針移到元素上時，mouseover部分繼續發射，而不是一次發射。
有什麼建議嗎？
添加活動類li你進入....刪除所有活動類離開ul
$('li').mouseenter(function(){
$(this).addClass('active');
});
$('ul').mouseleave(function(){
$(this).find('.active').removeClass('active');
})
可以使用https://api.jquery.com/mouseenter/的mouseenter代替鼠標懸停
你可能想利用event delegation。
像這樣的東西應該工作：
$('ul').on('mouseover', 'li', function() { console.log('hovered'); });
鼠標懸停部分不斷射擊，我提出我的鼠標指針移到元素， 而不是發射一次。
您可以使用標誌只執行一次代碼塊，但是，這不會阻止多次重新觸發事件，它只會忽略第一個事件之後的事件。
var flag = true;
$('li').mouseover(function() {
if(flag){
// actions here
flag = false;
}
});
雖然，我會建議您調查.mouseenter()。
片段
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
</head>
<body>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<script>
var flag = true;
$('li').mouseover(function() {
if(flag){
console.log("testing");
// actions here
flag = false;
}
});
$('ul').mouseout(function() {
// other actions here
});
</script>
</body>
</html>
使用標誌，並設置時它在第一次啓動後會變成假。 –
當懸停任何li元素時，我會顯示一個背景圖像（與每個li元素關聯）。當懸停在整個列表中時，我想切換回默認的背景圖像。當懸停在li元素之間時，我不想切換到默認圖像。 – drake035