Question

在我的网站中，我有一组div s有删除选项（基本上是一个链接）。我想要的是删除选项 - 默认隐藏 - 当鼠标进入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; }

在jQuery中隐藏/显示div的子节点

1 个答案: