1

所以我有一个导航菜单，它显示一个特定的 div 与 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

先感谢您。

4

3 回答 3

3

试试这个：

$(document).ready(function() {
      $('#navlink1 , #navlink2').mouseover(function() {
        $('#overlay1 , #overlay2').toggle();
      });
    });
于 2013-08-20T13:28:15.593 回答
1

我也对 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'))
    })
});

演示：小提琴

于 2013-08-20T13:34:31.610 回答
0

乍一看，你有一个错字

$('#overlay1 , overlay2')

你需要有

$('#overlay1 , #overlay2')

另外，stop()没有必要，甚至不确定您要做什么。

于 2013-08-20T13:22:33.573 回答