0

我想要实现的是显示“菜单”跨度,当我将鼠标悬停在“标题”跨度上时,但只有当我离开“标题”时它才会消失。

<header>
        <span id="title">
            title etc
        </span>

        <span id="menu">
            menu content etc
        </span>
</header>

我写了这个 jquery 代码,它可以工作,除了当我离开“标题”跨度而不是“标题”时“菜单”跨度消失了

$('#title').hover({
    $('#menu').toggle();
});

知道如何解决这个问题吗?

4

2 回答 2

3

实现此目的的一种方法是稍微重构菜单,在您的现实世界场景中,定位可以处理它的显示方式。

<header>  
<span id="title">
            title etc
             <span id="menu">
            menu content etc
        </span>
</span>
</header> 

小提琴

这是一个更复杂的示例。

<span class="title">
            title
             <span class="menu">
                 <span class="item">menu11</span>
                <span class="item">menu12</span>
                 <span class="item">menu13</span>
        </span>
</span> <span class="title">
            title2 
             <span class="menu">
            <span class="item">menu21</span>
                <span class="item">menu22</span>
                 <span class="item">menu23</span>
        </span>
</span>

小提琴

上面的结构只有css:

.menu {
    display:none;
    position:absolute;
    top:10px;
    left:0;
}
.title {
    position:relative;
}
.title:hover .menu{
    display:block;
}

小提琴

于 2013-09-05T22:20:36.043 回答
2

怎么样:

$('#title').mouseenter(function(){
    $('#menu').show();
});

$('header').mouseleave(function(){
    $('#menu').hide();
});

这是一个 jsfiddle:http: //jsfiddle.net/5sL5g/

于 2013-09-05T22:20:24.957 回答