1

このような質問をすると怒られることは承知していますが、セレクターは初めてで、既存の UL に埋め込まれた子 UL のホバー効果に苦労しています。

HTML:

    <ul id="ctxMenuStock">
        <li><a href="#ctxCMDCopy">Copy</a></li>
        <li><a href="#ctxCMDReserve">Reserve/Outgoing</a></li>
        <li><a href="#">Set Status <span style="font-family: Webdings">6</span></a>
            <ul id="ctxMenuStockStatuses" runat="server"></ul>
        </li>
    </ul>

ctxMenuStockStatuses は、ページの読み込み時にサーバー コードによって入力されます。

CSS:

    #ctxMenuStock, #ctxMenuStock ul, #ctxMenuPending, #ctxMenuPending ul{
        display:none;
        margin:0;
        padding:0;
        list-style-type:none;
        list-style-position:outside;
        position:fixed;
        line-height:1.5em;
    }

    #ctxMenuStock a:link, #ctxMenuStock hr, #ctxMenuStock a:active, #ctxMenuStock a:visited, #ctxMenuPending a:link, #ctxMenuPending hr, #ctxMenuPending a:active, #ctxMenuPending a:visited{
        display:block;
        padding:0px 5px;
        color:#fff;
        text-decoration:none;
        background-color:#333;
     }

    #ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li, #ctxMenuStock>li:hover ul li a
    {
        color:#fff;
        background-color:#333;
    }

    #ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{
        background-color:#fff;
        color:#333;
    }

    #ctxMenuStock ul li ul li a:hover, #ctxMenuPending ul li ul li a:hover{
        background-color:#fff;
        color:#333;
    }

    #ctxMenuStockStatuses li
    {
        color:#fff;
        background-color:#333;
    }

    #ctxMenuStockStatuses li:hover
    {
        background-color:#fff;
        color:#333;
    }


    #ctxMenuStock li, #ctxMenuPending li{
        float:none;
        position:relative;
    }


    #ctxMenuStock ul, #ctxMenuPending ul {
        position:absolute;
        display:none;
        float:left;
    }

    #ctxMenuStock li ul a, #ctxMenuPending li ul a
    {
        width:12em;
        margin: 0 0 0 4px;
        float:left;
    }

    #ctxMenuStock ul ul, #ctxMenuPending ul ul{
        top:auto;
    }

    #ctxMenuStock li ul ul, #ctxMenuPending li ul ul {
        left:12em;
        margin:0px 0 0 10px;
    }

    #ctxMenuStock li:hover ul ul, #ctxMenuStock li:hover ul ul ul, #ctxMenuStock li:hover ul ul ul ul{
        display:none;
    }
    #ctxMenuStock li:hover ul, #ctxMenuStock li li:hover ul, #ctxMenuStock li li li:hover ul, #ctxMenuStock li li li li:hover ul{
        display:block;
    }

    #ctxMenuPending li:hover ul ul, #ctxMenuPending li:hover ul ul ul, #ctxMenuPending li:hover ul ul ul ul{
        display:none;
    }
    #ctxMenuPending li:hover ul, #ctxMenuPending li li:hover ul, #ctxMenuPending li li li:hover ul, #ctxMenuPending li li li li:hover ul{
        display:block;
    }

メニューは基本的に暗い背景に白いテキストのスタイルですが、ホバーするとこれが反転します。これは親メニューでは問題なく機能しますが、子メニューは変更されず、黒地に白のままです。

この CSS のいくつかが互いに矛盾していることは知っていますが、理解するのが難しくなっています。サブメニューでこれを行う方法の実際の例をオンラインで（もしあれば）たくさん見つけることができないようです。

誰かがこれに対する最善のアプローチを教えてください。

編集: 要求に応じて、JSFiddle の例が作成されました: http://jsfiddle.net/KzhEP/ 私のメイン プロジェクトでは、oncontextmenu 属性がサーバー側のテーブルの各行にアタッチされています。簡単な例をモックアップしましたが、何らかの理由で、jsfiddle で右クリック機能が動作しません。

4

2 に答える 2

2

ここで何を達成したいのかを伝えるのは難しいですが、次のことを試すことができます ~

ネストされた白地に黒の css の変更をオーバーライドしているため、次の css を削除します。

#ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li, 
#ctxMenuStock>li:hover ul li a{
    color:#fff;
    background-color:#333;
}

次に、ホバー効果を提供する CSS セレクターを次のように変更します。

#ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{
    background-color:#fff;
    color:#333;
}

に：

#ctxMenuStock li:hover > a, #ctxMenuPending li:hover > a{
    background-color:#fff;
    color:#333;
}

このようにして、深さに関係なくすべてのli要素を#ctxMenuStockターゲットにしていますが、ホバーされた要素の子アンカータグのみを操作します。#ctxMenuPendingli

例: http://jsfiddle.net/embWK/

于 2013-01-14T12:38:13.383 に答える
0

あなたのCSSは間違っています。一見すると、同じものに対して異なる設定を入力しています。CSS をもう一度確認すると、間違いが見つかります

于 2013-01-14T12:05:14.147 に答える