Question

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

问题在于，当我将鼠标移到最后一个li（子级别1）上时，会显示其父级Level1和Superlevel1的.actions。我想只显示sub-level1。。

所以我试图通过以下方式替换最后的css块：

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

但last-of-type伪选择器应用于li而不是li:hover。

如何组合这两个伪选择器？

Answer 1

问题是，当您将鼠标悬停在内部li列表项上时，您还将鼠标悬停在外部li项上。所以当规则

ul.treeview > li > ul > li:hover

匹配，以下规则也匹配：

ul.treeview > li:hover

你需要的是一种方式来说“我正在徘徊在子项目而不是在父项目上”，我认为最简单的方法是修改html（对不起！）。

由于每个li包含其所有子项，因此您不应使用:hover上的li属性。相反，请创建一个仅包含您希望: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与您拥有的非常相似，只需将li:hover替换为.itemcontent:hover。

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

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

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

Answer 2

您可以将选择器基于a而不是li，并使用这样的sybling选择器：

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

example

结合最后一种类型和悬停

2 个答案: