Html CSS下拉框仅在'；ulli ulli：悬停在a'；

请看下面

边框应仅出现在悬停的

标记上，但它会出现在嵌套标签中的所有

标记上

HTML

<ul><li>Home</li>
  <li><a href='#'>About</a></li>
  <li>
    <a href='#'>Portfolio</a>
    <ul>
      <li><a href='#'>Web Design</a></li>
      <li><a>Web Development</a></li>
      <li><a>Illustrations</a></li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

试试这个：

ul li:hover > a {
  border: 1px solid red;
}

---

“>”表示我们只与直接子项建立关系，而不是与嵌套子项建立关系。

将悬停链接更改为下面的链接

ul li li:hover a {
  border: 1px solid red;
}

---

如果希望仅在悬停的周围有边框，请替换代码

ul li:hover a {
  border: 1px solid red;
}

与

ul li a:hover {
  border: 1px solid red;
}

---

谢谢你，伙计。你能解释一下为什么这种方法与另一种方法相反吗？

ul li a:hover {
  border: 1px solid red;
}