Question

所以我有一个导航菜单，显示与li项目悬停相关的特定div，效果很好。当它显示时，我有一个与div交互的问题。我使用div而不是嵌套列表，因为在显示div时不仅仅是链接。我的麻烦是，当我在li上盘旋然后尝试点击显示的div中的某些内容时，一旦我将鼠标从li移动到显示的div，它就会立即消失。

这是我的代码：

HTML：

<div class="menu-header-container"> 
<ul>
        <li id="navlink1">
    <a href="#">link one</a>
    </li>
        <li id="navlink2">
    <a href="#">link one</a>
    </li>
    <div id="overlay1">
             <p>some stuff</p>
             <img src="someimage.jpg">
        </div>
    <div id="overlay2">
             <p>some stuff</p>
             <img src="someimage.jpg">
        </div>
</ul>
</div>

CSS

.menu-header-container{
position: relative;
overflow: visible;
float: right;
margin-top: 4%;
}
.menu-header-container > ul > li{
margin-left: 20px;
float: right;
}
#overlay1, #overlay2{
float: none;
display: none;
position: absolute;
background: aqua;
z-index: 999999999;
width: 100%;
top: 90%;
}

的jQuery

<script>
$(document).ready(function() {
$('#navlink1 , #navlink2').hover(function() {
$('#overlay1 , overlay2').stop().show();
}, function() {
$('#overlay1 , overlay2').stop().hide();
});
});
</script>

我的jQuery技能几乎不存在所以请原谅我的无知

这是一个小提琴：

jsFiddle

提前谢谢。

Answer 1

试试这个：

$(document).ready(function() {
      $('#navlink1 , #navlink2').mouseover(function() {
        $('#overlay1 , #overlay2').toggle();
      });
    });

Answer 2

我也改变了html

<div class="menu-header-container"> 
    <ul>
        <li id="navlink1">
            <a href="#">link one</a>
        </li>
        <li id="navlink2">
            <a href="#">link one</a>
        </li>
    </ul>
    <div id="overlay1">
        <p>some stuff1</p>
        <img src="someimage.jpg"/>
    </div>
    <div id="overlay2">
        <p>some stuff2</p>
        <img src="someimage.jpg"/>
    </div>
</div>

然后

$(document).ready(function() {
    var $overls = $('.menu-header-container > div');
    $('.menu-header-container li').hover(function() {
        var $this = $(this), idx = $this.index(), $target = $overls.eq(idx);
        $target.stop().show();
    }, function() {
        var $this = $(this), idx = $this.index(), $target = $overls.eq(idx);
        var timer = setTimeout(function(){
            $target.stop().hide();
        }, 200);
        $target.data('hoverTimer', timer)
    });
    $overls.mouseenter(function(){
        clearTimeout($(this).data('hoverTimer'))
    })
});

演示：Fiddle

Answer 3

乍一看，你有一个拼写错误

$('#overlay1 , overlay2')

你需要

$('#overlay1 , #overlay2')

此外，stop()不是必需的，甚至不确定你要做什么。

显示div并将其显示在悬停jQuery html上

3 个答案: