结合最后的类型和悬停

我有以下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

结合最后的类型和悬停

回答

相关问题