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传递给$("#parent").hover(function(){ $(this).css("border-color", "white"); },function(){ $(this).css("border-color", "black"); });。 1}}并删除mouseout处理程序

{{1}}

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

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

3 个答案: