我正在运行这个简单的“测试”代码来更改嵌套列表的背景颜色 <ul class="dropcontent">通过使用 :hover on parent <li class="drop">
.drop:hover .dropcontent {
background-color: yellow;
}<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Services</a></li>
<ul class="dropcontent">
<li><a href="#">serv1</a></li>
<li><a href="#">serv2</a></li>
<li><a href="#">serv3</a></li>
<li><a href="#">serv4</a></li>
<li><a href="#">serv5</a></li>
</ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</body>请有人解释这里出了什么问题。
最佳答案
.dropcontent是 .drop 的 sibling (不是后代)，所以选择器 .drop:hover .dropcontent不会瞄准它。
要更正此问题，请移动结束符 </li>的 .drop收盘后</ul>的 .dropcontent :
.drop:hover .dropcontent {
background-color: yellow;
}<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Services</a>
<ul class="dropcontent">
<li><a href="#">serv1</a></li>
<li><a href="#">serv2</a></li>
<li><a href="#">serv3</a></li>
<li><a href="#">serv4</a></li>
<li><a href="#">serv5</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</body>或者使用 adjacent sibling combinator ( + )使用选择器 .drop:hover + .dropcontent :
.drop:hover + .dropcontent {
background-color: yellow;
}<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Services</a></li>
<ul class="dropcontent">
<li><a href="#">serv1</a></li>
<li><a href="#">serv2</a></li>
<li><a href="#">serv3</a></li>
<li><a href="#">serv4</a></li>
<li><a href="#">serv5</a></li>
</ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</body>请注意，前者将在选择子链接时应用悬停，而后者仅在 .drop 时应用悬停。本身被选中。
关于html - 为什么 Hover 不能处理嵌套在另一个列表下的列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57367258/