javascript - 在jQuery中隐藏/显示div的孩子

Question

在我的网站中，我有一组divs 有一个删除选项（基本上是一个链接）。我想要的是删除选项 - 默认情况下隐藏 - 当鼠标进入 div 时显示并在它离开时隐藏。如果一个 div 有子元素并且鼠标悬停在其中一个子元素上，那么容器和子元素都应该具有可见的删除选项。

这是HTML：

<div class="container">
    <a href=".." class="deleteOption">Delete</a>
    <div class="child">
        <a href=".." class="deleteOption">Delete</a>
    </div>
    <div class="child">
        <a href=".." class="deleteOption">Delete</a>
    </div>
    .
    .
    .
    <div class="child">
        <a href=".." class="deleteOption">Delete</a>
    </div>
</div>

所以这是我想出的JavaScript：

$('div.container').mouseenter(function () {
    $(this).find('a.deleteOption').show();
    $(this).find('div.child').find('a.deleteOption').hide();
});

$('div.container').mouseleave(function () {
    $(this).find('a.deleteOption').hide();
});

$('div.child').mouseenter(function () {
    $(this).find('a.deleteOption').show();
    $(this).parent.find('a.deleteOption').hide();
});

$('div.child').mouseleave(function () {
    $(this).find('a.deleteOption').hide();
});

这在 Chrome 和 Firefox 中运行良好，但在 IE（甚至在 IE 9 中）中，删除选项会间歇性地显示和隐藏。有没有更好的方法来为每个浏览器使用 jQuery？

Answer 1

您可以使用纯 css 实现此目的：

.container .deleteOption { display:none; }
.container:hover > .deleteOption { display:inline; }
.child:hover > .deleteOption { display:inline; }