當鼠標懸停在其子元素上時，如何防止父代的鼠標點火？

假設我有一個紅色的方形圖像，當鼠標移過它時變成綠色，當鼠標離開方塊時它會變回紅色。然後，我用它做了一個菜單排序的事情，這樣當我將鼠標懸停在廣場上時，它會變成綠色，並在其下方顯示一個矩形。當鼠標懸停在其子元素上時，如何防止父代的鼠標點火？

我想要發生的是這樣的：矩形出現後，我將鼠標移出廣場和矩形，我希望廣場保持綠色，直到我將鼠標移出矩形。

我該如何做到這一點與jQuery的？我使用的代碼是這樣的：

$('.square').hover(function() { 
    $(this).addClass('.green'); 
    }, function() { 
    $(this).addClass('.red'); 
}); 
$('.square').hover(function() { 
    $(this).children('.rectangle').show(); 
    }, function() { 
    $(this).children('.rectangle').hide(); 
});

來源

2010-01-27 Paultwo

如果菜單是正方形內你可以嘗試這樣的事：

$('.square').bind("mouseenter",function(){ 
    $(this).addClass('green'); 
    $('.rectangle').show(); 
}); 

$('.square').bind("mouseleave",function(){ 
    $(this).addClass('red'); 
    $('.rectangle').hide(); 
});

來源

2010-01-27 15:38:49 mck89

您的addClass語法不正確。 '.'不應該在類名中。 – 2010-01-27 15:47:25

是的，你是對的我糾正它 – mck89 2010-01-27 15:49:27

你只有很少的錯誤在你的代碼。

你永遠不會刪除任何類，你只能嘗試添加類。這隻會工作一次，所有後續的嘗試都不會做任何事情，因爲jQuery不會將同一個類兩次添加到相同的元素。
添加類時，不應使用點語法。僅僅通過自身提供的類名：

的jQuery：

$('.square').hover(function() { 
    $(this).addClass('green'); 
    $(this).children('.rectangle').show(); 
}, function() { 
    $(this).removeClass('green'); 
    $(this).children('.rectangle').hide(); 
});

CSS：

/* Make sure .green comes after .red */ 
.red { background: red } 
.green { background: green }

來源

2010-01-27 15:45:56

最近我有同樣的問題。我所做的是將一個mouseenter事件添加到「孩子」元素，所以從父母傳遞到孩子時不會關閉。基本上，我在這兩個元素上都有mouseenter和mouseleave（這當然有些重疊，因此無法正常工作）。

來源

2010-01-27 16:00:36

當鼠標懸停在其子元素上時，如何防止父代的鼠標點火？

回答

相關問題