javascript - ある要素のホバーでdivを切り替え、別の要素をオフにしますか?

Question

私が達成しようとしているのは、「タイトル」スパンにカーソルを合わせたときに「メニュー」スパンを表示することですが、「ヘッダー」を離れると消えるだけです。

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

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

私はこのjqueryコードを書きましたが、「ヘッダー」ではなく「タイトル」スパンを離れると「メニュー」スパンが消えることを除いて、機能します

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

どうすればこれを修正できますか？

Answer 1

これを実現する 1 つの方法は、メニューを少し再構築することです。実際のシナリオでは、配置によって表示方法を調整できます。

<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;
}

フィドル

Answer 2

どうですか：

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

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

ここにjsfiddleがあります：http://jsfiddle.net/5sL5g/