哈弗的父元素和所有的孩子

Question

我有這樣的結構：

<div id="parent"> 
    <div class="children">Child 1</div> 
    <div class="children">Child 2</div> 
    <div class="children">Child 3</div> 
    <div class="children">Child 4</div> 
</div> 

在jQuery中，我希望它這樣，當你將鼠標懸停在「父母」（包括「孩子」），「父母在任何地方「周圍有一個白色的邊框。這是我目前有：

$("div#parent").hover(function(){ 
    $(this).css("border-color", "white"); 
}); 
$("div#parent").mouseOut(function(){ 
    $(this).css("border-color", "black"); 
}); 

該代碼的問題是，如果你在孩子鼠標，它通常不會再變成黑色。另外，由於孩子們的原因，有時候似乎不能解決懸停問題。

我希望這個工作非常乾淨，沒有錯誤。可以做什麼？

謝謝你的幫助！ :)

Answer 1

hover()寄存器都mouseenter和mouseleave處理程序，所以你可以傳遞兩個事件處理函數.hover()第一個爲mouseenter和第二的mouseleave並刪除mouseout處理

$("#parent").hover(function(){ 
    $(this).css("border-color", "white"); 
},function(){ 
    $(this).css("border-color", "black"); 
}); 

演示：Fiddle

Answer 2

試試這個：

JSFiddle

$("#parent").hover(function(){ 
    $(this).css("border-color", "white"); 
}); 

$("#parent").on('mouseleave', function(){ 
    $(this).css("border-color", "black"); 
}); 

Answer 3

試試這個：

$(function(){ 
    $('#parent').mouseover(function(){ 
     $(this).css("border-color", "white"); 
    }).mouseout(function(){ 
     $(this).css("border-color", "black"); 
    }); 
});