0

ユーザーがトップバーのボタンにカーソルを合わせると開始される簡単なメニューを作成しようとしています。メニューはコンテナdiv内に表示されます（ブロック表示はonmouseoverイベントを使用してアクティブ化されます）。ただし、ユーザーがコンテナ内のメニュー項目リストにカーソルを合わせると、divは消えます。HTML構造は次のようなものです。

<div id="menu-contaier" onmouseout="hideMenu();">
        <div id="lvl1"></div>
        <div id="lvl2"></div>
        <div id="lvl3"></div>
</div>

私の考えでは、これは、マウスが「lvl1」（またはlvl2またはlvl3）IDに触れると、「menu-container」divから外れるために発生すると思います。別のdiv内にネストしようとしましたが、どちらも機能しませんでした。

理想的には、HTML構造は次のようになります。

<div id="menu-contaier" onmouseout="hideMenu();">
        <div id="lvl1"><ul><li onmouseover="presentForLevel2(3, 'lvl2');">Windows</li><li onmouseover="presentForLevel2(4, 'lvl2');">Tables</li></ul></div>
        <div id="lvl2"></div>
        <div id="lvl3"></div>
</div>

また、ホバーすると、「presentForLevel2（）」関数がlvl2 divを埋めますが、これは発生しません。

4

1 に答える 1

-1

これは、「lvl」div のいずれかからマウスを移動すると、mouseout イベントがバブルし、親 div でもトリガーされるために発生します。これを防ぐには、子 div に mouseout イベント ハンドラーを設定し、イベントのバブリングを停止します。ここにデモがあります：http://jsfiddle.net/ESBYw/

于 2012-08-12T09:57:43.270 に答える