如何懸停在孩子身上 <li> 元素

Question

請查看下面的代碼段。

結構是

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

我的CSS如下：

li:hover
{
   background-color: yellow;
}

它對第一個li很好用，但是當我將鼠標懸停在第二個項目上時（在子ul中），子列表中的所有項目都將突出顯示。

我需要的是一次突出顯示一行，而不管列表項的關系如何。

我試過了

li:child-only:hover

但它沒有用。 關於SO的所有其他答案都在使jQuery處理此問題。 可以僅使用CSS來解決嗎？

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

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

Answer 1

只需更改ul內部為li設置的樣式，即可：

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

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

Answer 2

您應該將:hover屬性放在圍繞li的文本內容的元素上，如下所示：

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

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

（或者如果要突出顯示整行內容，則可以使用div ）

Answer 3

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

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

U懸停時必須重置其他位置。

Answer 4

您可以使用頁面背景顏色覆蓋sub-ul的背景顏色：

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

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

Answer 5

我添加了幾個附加類，因此您實際上可以定位要設置樣式的元素。 在這里，您可以找到有關>更多信息> 僅第一個直接孩子有CSS選擇器嗎？

 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;

}

演示版