Question

请查看下面的代码段。

结构是

<ul>
    <li>text1</li>
    <li> <ul><li> text2 </li>
             <li> text3 </li>
         </ul>
    </li>
</ul>

我的CSS如下：

li:hover
{
   background-color: yellow;
}

它适用于第一个li，但是当我将鼠标悬停在第二个项目上（在sub-ul中）时，子列表中的所有项目都会突出显示。

我需要的是一次突出显示一行，无论列表项的关系如何。

我试过

li:child-only:hover

但它不起作用。关于S.O.的所有其他答案正在接近jQuery来处理这个问题。这可以只使用CSS来解决吗？

＆＃13;

ul {
  list-style-type: none;
}
li:hover {
  color: blue;
  cursor: pointer;
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li>Lv1: First Item</li>
  <li>Lv1: Second Item</li>
  <li>
    <ul>
      <li>Lv2: First Item</li>
      <li>
        <ul>
          <li>Lv3: First Item</li>
          <li>Lv3: Second Item</li>
          <li>Lv3: Third Item</li>
        </ul>
      </li>
      <li>Lv2: Second Item</li>
      <li>Lv2: Third Item</li>
    </ul>
  </li>

</ul>

＆＃13;

Answer 1

只需更改为ul里面的li设置的样式：

＆＃13;

ul {
    list-style-type: none;
    color: black;
    cursor: default;
    background-color: white;
}
li:hover {
    color: blue;
    cursor: pointer;
    background-color: yellow;
}

＆＃13;

<ul>
    <li>Lv1: First Item</li>
    <li>Lv1: Second Item</li>
    <li>
        <ul>
            <li>Lv2: First Item</li>
            <li>
                <ul>
                    <li>Lv3: First Item</li>
                    <li>Lv3: Second Item</li>
                    <li>Lv3: Third Item</li>
                </ul>
            </li>
            <li>Lv2: Second Item</li>
            <li>Lv2: Third Item</li>
        </ul>
    </li>
</ul>

＆＃13;

Answer 2

您应该将:hover属性放在li的文本内容周围的元素上，如下所示：

＆＃13;

ul {
  list-style-type: none;
}
li span:hover {
  color: blue;
  cursor: pointer;
  background-color: yellow;
}

＆＃13;

<ul>
  <li><span>Lv1: First Item</span></li>
  <li><span>Lv1: Second Item</span></li>
  <li>
    <ul>
      <li><span>Lv2: First Item</span></li>
      <li>
        <ul>
          <li><span>Lv3: First Item</span></li>
          <li><span>Lv3: Second Item</span></li>
          <li><span>Lv3: Third Item</span></li>
        </ul>
      </li>
      <li><span>Lv2: Second Item</span></li>
      <li><span>Lv2: Third Item</span></li>
    </ul>
  </li>
</ul>

＆＃13;

（如果您想突出显示整行内容，可以使用div）

Answer 3

＆＃13;

ul {
  list-style-type: none;
}
ul li:hover {
  color: blue;
  cursor: pointer;
  background-color: yellow;
}

ul li:hover ul{
  background-color: white;
  color: black;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li>Lv1: First Item</li>
  <li>Lv1: Second Item</li>
  <li>
    <ul>
      <li>Lv2: First Item</li>
      <li>
        <ul>
          <li>Lv3: First Item</li>
          <li>Lv3: Second Item</li>
          <li>Lv3: Third Item</li>
        </ul>
      </li>
      <li>Lv2: Second Item</li>
      <li>Lv2: Third Item</li>
    </ul>
  </li>

</ul>

＆＃13;

在悬停时，你必须为其他人重置。

Answer 4

您可以使用页面背景颜色覆盖sub-ul的背景颜色：

ul > li:hover {
  background: yellow;
}
ul > li:hover > ul {
  background: white;
}

示例：http://jsfiddle.net/xo1g3sub/

Answer 5

我添加了几个aditional类，因此您可以实际定位要设置样式的元素。在这里，您可以找到有关> Is there a CSS selector for the first direct child only?的更多信息

ul {
  list-style-type: none;
}
.first > li:hover {
  color: blue;
  cursor: pointer;
  background-color: yellow;
}
.first > .nested:hover{
 background:none;
 color:black;
}

<ul class="first">
  <li>Lv1: First Item</li>
  <li>Lv1: Second Item</li>
  <li class="nested">
    <ul>
      <li>Lv2: First Item</li>
      <li>
        <ul>
          <li>Lv3: First Item</li>
          <li>Lv3: Second Item</li>
          <li>Lv3: Third Item</li>
        </ul>
      </li>
      <li>Lv2: Second Item</li>
      <li>Lv2: Third Item</li>
    </ul>
  </li>
</ul>

Answer 6

如果您正在寻找一个非常优雅event驱动的解决方案，您应该实现以下代码：

注意：它使用e.stopPropagation()仅在悬停元素上执行事件。这样，您只需添加2个事件侦听器来处理整个列表。不需要HTML或CSS修改。

$('ul').delegate('li', 'mouseover', function (e) {
    if (e.currentTarget.tagName == 'LI') {
        $(e.currentTarget).css('background-color','yellow');
        e.stopPropagation();
    }
});

$('ul').delegate('li', 'mouseout', function (e) {
    if (e.currentTarget.tagName == 'LI') {
        $(e.currentTarget).css('background-color','');
        e.stopPropagation();
    }
});

工作小提琴： https://jsfiddle.net/urahara/t6fp2un2/

Answer 7

<ul>
  <li>Lv1: First Item</li>
  <li>Lv1: Second Item</li>
  <li>Lv1: Third Item
    <ul>
      <li>Lv2: First Item</li>
      <li>Lv2: Second Item
        <ul>
          <li>Lv3: First Item</li>
          <li>Lv3: Second Item</li>
          <li>Lv3: Third Item</li>
        </ul>
      </li>
      <li>Lv2: Second Item</li>
      <li>Lv2: Third Item</li>
    </ul>
  </li>

</ul>


ul {
  list-style-type: none;
  position: relative; 
}
ul li:hover {
  color: blue;
  cursor: pointer;
  background-color: yellow;
}
ul > li{    
    display:inline-block;
}
ul li > ul{
    display:none;    
}

ul li > ul li{
    display:block; 
    color:#fff;
}
ul li:hover > ul{
  display: block;
  position: absolute;
  border: 1px solid #000;
  background:blue;  
}
ul li ul{
    position: relative;    
}
ul li ul li ul{    
    position: absolute;
    border: 1px solid #000;
    left: 100%;
}
ul li ul li:hover > ul {
  display: block;

}

Demo

如何将鼠标悬停在子<li>元素</li>上

7 个答案: