Question

是否可以在CSS中进行以下操作：

#subMenue {
//this rule apply to a div with an id of "subMenue"
height: auto;
width: 113px;
position: absolute;
background-color: #B3B3B3;
visibility: hidden;
}
#menueLink:hover {
//this rule apply to another div with an id of "menueLink"
//make the div that is effected by *#subMenue* rule change its visibility to *visible*
}

我正在尝试使用CSS制作基本的子菜单，而不使用JavaScript，并且复杂性最小。

Answer 1

你不能用CSS做你想做的事。也就是说，你可以使用下面的CSS菜单：

HTML：

<ul id="nav">
    <li>
        <a href="">Main Item 1</a>
        <ul>
            <li>Sub item 1</li>
            <li>Sub item 1</li>
        </ul>
    </li>
</ul>

CSS：

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

您可以根据需要调整absolute定位的子菜单

Answer 2

如果#submenue是子菜单的子级，则可以创建规则：

#menueLink:hover #submenue {
    visibility:visible;
}

请注意，在IE7及以下版本中，只有锚点可以使用伪选择器：hover。

Answer 3

answer from K Prime确实是答案，但是他的方法改为使用你想要的绝对定位：

#nav > li ul {
    display: none;
}
#nav > li:hover ul {
    height: auto;
    width: 113px;
    position: absolute;
    background-color: #B3B3B3;
    display: block;
}

Answer 4

这在CSS中是不可能的。您必须将:hover应用于#subMenue本身（这显然不是您在这种情况下所需要的，加上它无论如何都是无意义的，因为#subMenue被隐藏，因此您无法在技术上将鼠标悬停在它）或使用JavaScript。

Answer 5

是或许是这样的：

#subMenue #menueLink {
visibility: hidden;
}


#subMenue:hover #menueLink {
visibility: visible;
}

如何制作应用于div的CSS规则会影响另一个div？

5 个答案: