css - 结合 last-of-type 和 hover

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 .actions。

所以我尝试通过以下方式替换最后一个 css block :

.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 与您的 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/