如何在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

我知道你正在努力实现这个目标：

• 当孩子li徘徊时，父母仍然保持与孩子相同的风格。

所以这是 SNIPPET

＆＃13;

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为这会解决你的问题，而html中的细微变化

<强> HTML

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

<强> CSS

ul {
  list-style: none;
}
ul li span{
  display:block;
}
ul li:hover > span {
  background-color: pink;
}

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

示例：https://jsfiddle.net/yvt8xecz/3/

  

增加跨度你不需要与ul li结构战斗只需改变跨度的颜色

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

<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
    <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>
</ul>

＆＃13;

＆＃13;

＆＃13;

编辑： 有效的HTML

Answer 4

   <ul>
    <li>1<ul>  << this Line Error

            <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>

固定代码

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

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

Answer 5

试试这个

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