Question

当你将鼠标悬停在＆lt;时，

有一个html列表作为带有CSS的下拉菜单。 li>像我的例子中的“产品”这样的元素。但是我想要的是悬停在＆lt; h3＆gt;比如我的例子中的“联系方式”。有可能吗？

这是html：

<h3>Contact</h3>
 <ul>

    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Products &#9662;</a>
        <ul>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Printers</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS代码：

ul li ul {
    display: none;
}

ul li:hover ul{
    display: block; /* display the dropdown */
}

非常感谢你。

Answer 1

简而言之 - 您应该在ul

中嵌套h3

<h3>
    Contact
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products &#9662;</a>
            <ul>
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</h3>

在你的CSS中：

ul li ul {
    display: none;
}

ul li:hover ul{
    display: block; /* display the dropdown */
}
h3 > ul {
     display: none;
}
h3:hover > ul {
    display: block;
}

以下是演示：https://jsfiddle.net/mscehjLf/1/

Answer 2

在悬停时，您只能控制悬停在其上的元素的CSS，或者您悬停在其上的元素中的元素的CSS（其中一个子元素）。因此，当您将鼠标悬停在ul上时，您无法进行h3更改样式，因为它们1）不是同一个对象，2）没有父子关系（它们是兄弟姐妹）。 / p>

要将鼠标悬停在h3上时显示菜单，可以将它们都包含在另一个对象（div）中，并将其用于悬停事件。要区分两个悬停，您可以为ul添加类名。

See this JSfiddle或下面的代码：

<div class="container">
    <h3>Contact</h3>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products &#9662;</a>
            <ul class="submenu">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

.container ul{
    display: none;
}
.container:hover ul.menu{
    display: block;
}
ul li ul.submenu {
    display: none;
}

ul li:hover ul{
    display: block; /* display the dropdown */
}

h3和列表下拉菜单CSS3

2 个答案: