Question

我正在开发一个CSS树视图，如果可能的话，我希望仅将悬停效果保留在具有子节点的元素上：

    <ul>
      <li><span>Item 1</span>
        <ul>
          <li><span>Item 1.1</span></li>
          <li><span>Item 1.2</span></li>
          <li><span>Item 1.3</span></li>
        </ul>
      </li>
    </ul>

我在css中所做的是：

.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

但这不像我预期的那样有效。

Answer 1

您希望：hover效果仅在＆＃34;项目1＆＃34;正确？

.treeview > ul > li:hover > span {
    color: red;
}

同时检查this Fiddle。

更新（根据您的评论）

.treeview  li:hover > span {
    color: red;
}

updated Fiddle。然而，这也将触发＆＃34;项目1.1.1＆＃34;徘徊时...

Answer 2

这就是你想要的吗？

http://jsfiddle.net/Defoncesko/p63b9/

HTML

<div class="treeview">
        <ul>
          <li><span>Item 1</span>
            <ul>
              <li><span>Item 1.1</span></li>
              <li><span>Item 1.2</span></li>
              <li><span>Item 1.3</span></li>
            </ul>
          </li>
        </ul>
</div>

CSS

  ul ul li:hover {
        background-color:#eee;
        border:1px solid #94a0b4;
        color:#000
    }

Answer 3

我认为这就是你想要的。我在小提琴中添加了另一个更大的李，所以你可以看到。

.treeview ul>li>span:hover {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}
.treeview ul>li>span ~ ul>li>span:hover {
    background:#fff;
    border:none;
    color:#000
}

演示：http://jsfiddle.net/QdEEf/1/

编辑：其实如果我真正了解你的问题。您正在寻找一种方法来确定li是否有ul作为一个孩子，然后将li悬停（如果有）。如果是这种情况，您将需要使用javascript来确定它是否有ul个孩子。用CSS

无法做到这一点

如何仅在父级上保持悬停效果

3 个答案: