1

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

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

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

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

4

2 回答 2

2

问题是当您将鼠标悬停在内部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>

所以在这个例子中，我用 a<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/

于 2013-10-03T10:50:47.473 回答
0

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

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

例子

于 2013-10-03T10:02:40.727 回答