0

有 4 个 div，如下所示

<style>
    .displayNoneIcon {
        display: none;
    }
</style>

<div id="div1" style="float: left">
    <div id="div11">hello</div>
    <div id="div12">hi</div>
</div>
<div id="div2" style="float: right">
    <div id="div21" class="displayNoneIcon"><a href="#">bye</a></div>
    <div id="div22" class="displayNoneIcon"><a href="#">see ya</a></div>
</div>

我想在 div11 上悬停时显示 div 21，在 div12 悬停时显示 dev22，就像菜单一样，它应该保持并可点击。如果我从 div11 移出，则 div21 必须隐藏，除非用户进入 div21。目前，如果我将指针从 div11 移向 div21，它就会隐藏起来。我希望它留下来。两者都必须像上面一样位于单独的 div 中。

我尝试使用 mouseenter 和 mouseleave，但它没有满足我的要求。请帮我解决一下这个。

$( "body" ).on( "mouseenter", "#div11", function(event) {
    $( "#div21" ).removeClass( "displayNoneIcon" );
});
$( "body" ).on( "mouseleave", "#div11", function(event) {
    $( "#div21" ).addClass( "displayNoneIcon" );
});
$( "body" ).on( "mouseenter", "#div12", function(event) {
    $( "#div22" ).removeClass( "displayNoneIcon" );
});
$( "body" ).on( "mouseleave", "#div12", function(event) {
    $( "#div22" ).addClass( "displayNoneIcon" );
});

提前致谢。 jsfiddle链接

4

1 回答 1

0

出于学习原因，实现这一点的最佳方法是在 javascript 中使用观察者模式。

观察者模式维基

这是在 javascript 中执行此操作的示例教程

从我的角度来看，您将希望在鼠标悬停/鼠标移出时触发广播状态的函数，然后订阅该广播的函数可以更新 div 的显示/隐藏状态。这也比您在上面的问题中更可回收。

祝你好运！

于 2014-07-21T14:36:32.383 回答