html - 如何使用 css 隐藏列表并在鼠标位于上方时显示它？

Question

我有这个菜单：

home
Pictures
Picture 1
Picture 2
Sounds
Videos

我想要Picture 1并且Picture 2被隐藏，除非我将鼠标移到上面"Pictures"

Answer 1

您必须在这里使用 javascript，CSS 本身没有任何逻辑。将图片1和图片2的显示属性设置为none，然后将鼠标悬停在图片上时用javascript设置为block。使用 PrototypeJS 你会做类似的事情

$("pictures").observe("mouseover", function(){ $("Picture 1").setStyle({display: "block"}) } )
$("pictures").observe("mouseout", function(){ $("Picture 1").setStyle({display: "none"}) } )

Answer 2

因为您的问题明显缺乏信息，尽管我对这个问题发表了自己的评论，但我将猜测您的 HTML 并假设您正在使用一个ul元素来包含您的列表：

<ul>
    <li>home</li>
    <li>Pictures
        <ul>
            <li>Picture 1</li>
            <li>Picture 2</li>
        </ul></li>
    <li>Sounds</li>
    <li>Videos</li>
</ul>​

如果是这种情况，那么我建议使用以下 CSS：

ul ul {
    display: none;
}

ul li:hover ul {
    display: block;
}​

JS 小提琴演示。

鉴于我怀疑您正在尝试制作某种菜单结构（再次，基于缺乏信息的疯狂猜测），我正在更新上面的 CSS 以演示飞出式 CSS 菜单：

ul {
    /* adjust to taste */
    width: 6em;
}

ul ul {
    display: none;
    /* to more easily show the connection between the parent li and child ul
       adjust to taste, of course */
    background-color: inherit;
}

li {
    /* to position the child ul element relative to its parent */
    position: relative;
}

li:hover {
    /* just to identify which li element is currently hovered */
    background-color: #ffa;
}

li li:hover,
li:hover li:hover {
    /* so the hovered li is differentiated from its parent ul's background
       and the background of its grandparent li. Adjust to taste */
    background-color: #dda;
}

ul li:hover ul {
    /* so that it's visible on the page */
    display: block;
    position: absolute;
    /* to be level with its parents top-edge */
    top: 0;
    /* so that the li appears on the right of the parent li */
    left: 100%;
}​

JS 小提琴演示。