Question

我创建了一个菜单，我希望将鼠标悬停在图像上方。如何编写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;
}

但我无法让它正常工作。有什么帮助吗？

Answer 1

只要optionsMenuTree和options是兄弟姐妹，您就不需要javascript就可以使用

#options {
    display: none;
}

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

查看更新的JSFiddle

Answer 2

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

Answer 3

首先你必须隐藏子菜单列表项。然后必须在悬停或主链接上显示..

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

如何创建悬停时显示的菜单？

3 个答案: