與類名

-1

以下條件懸停是我的代碼：與類名

<!DOCTYPE html> 
<html> 
<head> 
    <title>list</title> 
    <style type="text/css"> 
     li.mainList:hover li.childList{ 
      color:red; 
     } 

    </style> 
</head> 
<body> 
<ul> 
    <li class="mainList">111</li> 
    <li>111 
     <ul> 
      <li class="childList">222</li> 
      <li class="childList">222</li> 
     </ul> 
    </li>  
    <li>111</li>  
    <li class="mainList">111</li>  
</ul> 

</body> 
</html>

我想改變顏色我的嵌套列表中的項目，只要在第一個孩子和主列表的最後一個子用戶將鼠標懸停。爲什麼我的上面的代碼不起作用，你對第一個孩子（最後一個孩子）的選擇器有什麼建議？

來源

2017-04-22 AFN

爲什麼？因爲你已經使用了後代組合子和嵌套列表我上面的代碼不工作

是不是元素的後代正在徘徊。

什麼是第一胎（最後一個孩子）你的建議選擇

爲了不使用它們。

你不能走備份樹得到的最後一個子懸停影響其先前使用CSS的兄弟姐妹之一的後裔。

改爲使用JavaScript（鼠標懸停監聽器）。

來源

2017-04-22 10:05:44 Quentin

我只想使用HTML，CSS – AFN

@AFN - 我把你轉回你剛纔評論的答案。在最後一刻，這並不是不可能的。 – Quentin

因爲您沒有正確使用選擇器。從你的標記，這應該工作。

li.mainList:hover + li li.childList{ 
      color:red; 
     }

Here是工作小提琴。

來源

2017-04-22 10:08:09

這不起作用。要求是懸停效果在第一個**和最後一個**列表項上工作。 – Quentin

@Quentin這是真的，但我認爲他已經控制了你已經解釋得很好的標記。但這可能是純粹的CSS解決方案。 –

我不明白「控制標記」是如何解決問題的（至少不是沒有改變內容，所以它不意味着同樣的事情） – Quentin

回答

相關問題