html - 如何在ul元素中单独悬停子节点？

Question

HTML ul 元素悬停在父元素上

ul li:hover {
  background-color: pink;
}

<ul>
  <li>1
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>

Fiddle

Answer 1

我了解到您正在努力实现这一目标:

• 当让 child li 悬停时， parent 仍然保持与 child 相同的风格。

所以这是一个片段

li {
  /* demo */
  list-style: none;
}
li:hover {
  color: red;
  font-weight: 700
}
li:hover li {
  color: none;
  font-weight: 400
}
li:hover li:hover {
  color: red;
  font-weight: 700
}

<ul>
  <li>1 - text
    <ul>
      <li>1 - text</li>
      <li>1 - text</li>
      <li>1 - text</li>
      <li>1 - text</li>
      <li>1 - text</li>
    </ul>
  </li>
  <li>1 - text</li>
  <li>1 - text</li>
  <li>1 - text</li>
  <li>1 - text</li>
</ul>