1

画像にカーソルを合わせると表示されるメニューを作成しました。それを作成するためのcssをどのように記述すればよいですか？これは私のメニューです：

<ul id="options" class="optionsMenu">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E
        <ul>
            <li>E1</li>
            <li>E2</li>
            <li>E3</li>
            <li>E4</li>
        </ul>
    </li>
    <li>F</li>
    <li>G</li>
   </ul>

非表示のままにして、次の画像にカーソルを合わせたときにのみ表示されるようにします。

<img src='...image.png' alt='Options Menu' id="optionsMenuTree"/>

私はこのようなことをする必要があると思います:

#options ul.optionsMenu ul{
    display: none;
    visibility: none;
}
#optionsMenuTree:hover > ul {
    display: block;
}

しかし、私はそれを正しく機能させることができません。何か助けはありますか？

4

3 に答える 3

2

optionsMenuTreeとが兄弟である限り、optionsjavascript は必要なく、使用できます。

#options {
    display: none;
}

#optionsMenuTree:hover ~ #options {
    display: block;
}

更新されたJSFiddleを参照してください

于 2013-01-29T16:04:51.280 に答える
1

CSS

#options{
    display: none;
}
#optionsMenuTree:hover + #options {
    display: block;
}

これを確認してください：http://jsfiddle.net/AliBassam/S9cdE/

ただし、画像のマウスを離すと、リストは再び非表示になります。リストを保持するには、Javascript/JQuery を使用する必要があると思います。

JQuery

$("#optionsMenuTree").hover(function(){    
    $("#options").show();
}, function(){
    $("#options").hide();
});

Javascript

<img onmouseover="ShowList()" onmouseout="HideList()"/>

それで：

function ShowList()
{
    document.getElementById("options").style.display="block";
}
function HideList()
{
    document.getElementById("options").style.display="none";
}
于 2013-01-29T15:59:50.867 に答える
1

まず、サブメニューのリスト項目を非表示にする必要があります。次に、ホバーまたはメインリンクに表示する必要があります..

ul#options ul {display: none;} ul#options ul li:hover > ul { display: block; }

于 2013-01-29T16:11:57.230 に答える