結合最後的類型和懸停

我有以下HTML結構：結合最後的類型和懸停

<ul> 
    <li> 
     <a href="#"> Superlevel 1 </a> 
     <span class="actions">Somes actions</span> 
     <ul> 
      <li> 
       <a href="#">Level 1 </a> 
       <span class="actions">Other actions</span> 
       <ul> 
        <li> 
         <a href="#">Sub-Level1</a> 
         <span class="actions">Sub Level actions</span> 
        </li> 
        <li> 
         <a href="#">Sub-Level1</a> 
         <span class="actions">Sub Level actions</span> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    <li> 
</ul>

的CSS是這樣的：

.treeview li .actions { 
    float: left; 
    padding: 0 15px; 
    visibility: hidden; 
} 

.treeview li:hover > .actions { 
    visibility: visible; 
}

的問題是，當我通過鼠標在過去裏（子級別1）顯示其父級Level1和Superlevel1的操作。我只想要顯示sub-level1 .actions。

所以我一直試圖通過以取代過去的CSS塊：

.treeview li:hover:last-of-type > .actions { 
    visibility: visible; 
}

但last-of-type僞選擇適用於立不li:hover。

有關如何組合這兩個僞選擇器的任何想法？

來源

2013-10-03 Gregoire

你可能誤解了如何'：最後的-type'工作。見http://www.w3.org/TR/selectors/#last-of-type-pseudo – BoltClock

假設樹視圖是根ul的類：.treeview li：hover：last-of-type - 將選擇**每個列表**（當然懸停） – Danield

@Danield和BoltClock好吧我現在明白了更好的選擇器 – Gregoire

的問題是，當你將鼠標懸停在內部li列表項，你也在外面徘徊li項目。所以當規則

ul.treeview > li > ul > li:hover

匹配，下面的規則也匹配：

ul.treeview > li:hover

你需要的是一個方法，說：「我將鼠標懸停在分項目，而不是在父項目「，我認爲最簡單的方法就是修改html（對不起！）。

由於每個li包含其所有子項目，因此不應使用li上的:hover屬性。相反，要只包含事物的元素你真正想要的:hover適用於：

<ul class="treeview"> 
    <li> 
    <div class="itemcontent"> 
     <a href="#">Level 1</a> 
     <span class="actions">Action A</span> 
    </div> 
    <ul> 
     <li> 
     <div class="itemcontent"> 
      <a href="#">Level 2</a> 
      <span class="actions">Action B</span> 
     </div> 
     <ul> 
      <li> 
      <div class="itemcontent"> 
       <a href="#">Level 3</a> 
       <span class="actions">Action C</span> 
      </div> 
      </li> 
      <li> 
      <div class="itemcontent"> 
       <a href="#">Level 3</a> 
       <span class="actions">Action D</span> 
      </div> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul>

因此，在這個例子中，我使用了一個<div class="itemcontent">包裹只是我想申請我懸停目標的東西。然後，CSS與您的CSS非常相似，只是將li:hover替換爲.itemcontent:hover。

.treeview .actions { 
    float: left; 
    padding: 0px 15px; 
    visibility: hidden; 
} 

.treeview .itemcontent:hover > .actions { 
    visibility: visible; 
}

的jsfiddle：http://jsfiddle.net/H8B5P/

來源

2013-10-03 10:50:47

你可以在你的a基地的選擇，而不是你的li和使用sybling選擇這樣的：

.treeview a:hover + .actions { 
    visibility: visible; 
}

example

來源

2013-10-03 10:02:40

我試過這個，但它的工作原理，但我不能點擊行動，因爲我不在一個了 – Gregoire

結合最後的類型和懸停

回答

相關問題