2

質問の仕方がよくわからないので、よくわかりません。

このJSFiddleを見てください。

About us にカーソルを合わせると、ドロップダウン メニューに小さな緑色のポインターが表示されます。マウスがそのポインターの上に移動すると、メニューが折りたたまれます。

知りたいのですが、そのポインタがメニューを折りたたむのを防ぐことは可能ですか.

タグにポインターを含む div を入れてみました<li>が、jQuery がトリッキーになります。

他に試してみることができるものはありますか？

4

3 に答える 3

3

ポインターの境界線を使用して解決し、ホバーされた要素の疑似クラスに配置します。

これは IE7 以降で動作します。

.menu > ul > li:hover > a:before {
    content: '';
    display:block;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: -7px;
    left: 10px;
    margin-left: -5px;
    border-top-color: #445921;
    border-width: 7px 7px 0px 7px;
    z-index:9;
}

フィドル: http://jsfiddle.net/mx877/

于 2012-11-26T15:24:16.363 に答える
1

Your pointer is not in the .menu > ul > li element which you are trying to select with the hover function:

    $(document).ready(function(e) {
    $('.menu > ul > li').hover(function(e) {

You could:

  1. Replace the .pointer div with a background image in your .menu > ul > li.

  2. You could move the .pointer div into the corresponding .menu > ul > li element:

    $('.pointer').appendTo($(this));
于 2012-11-26T15:23:48.680 に答える
0

小さな回転した四角形にカーソルを合わせると、メニューからカーソルが実際にフォーカスを失っているために発生しています。最上位要素のパディングを拡張して正方形を含めると、正常に機能します。

        <li style="padding-bottom:10px;"><a href="index.html">ABOUT US</a>
            <ul>

http://jsfiddle.net/calder12/Vyd3a/3/

于 2012-11-26T15:34:54.217 に答える