将鼠标悬停在父元素和所有子元素上

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

悬停（）寄存器二者的mouseenter和鼠标离开处理程序，所以可以传递两个事件处理函数向.hover()第一个为mouseenter和第二对mouseleave并取出鼠标移开处理程序

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

演示： 小提琴

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