如何只保留父元素的悬停效果

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
}

但是这并不像我预期的那样起作用。

- Juan Jardim

---

你想要将 hover 应用在哪些元素上？只是 Item 1 的 span 元素吗？ - Kierchon

ul是li的子元素，而不是span的子元素。 - Paulie_D

@Kierchon 在这种情况下，只有项目1。但是如果项目1.1有一个子项（项目1.1.1），我也希望突出显示项目1.1。 - Juan Jardim

你不能使用CSS来判断某个元素是否有子元素，但可以使用Jquery。我可以给你提供一个Jquery的选项吗？或者你可以为那些有子元素且需要突出显示的项目添加一个特定的类。 - DaniP

Answer 1

你希望:hover效果仅在“项目1”内部生效，对吗？

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

我提供这个Fiddle链接，以供参考。

根据您的评论，已做出更新。

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

这里有一个更新的 Fiddle。然而，当鼠标指针悬停在“Item 1.1.1”上时，它也会触发该。

- GreyRoofPigeon

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
    }

- Defoncesko

Answer 3

我认为这就是你想要的。我在我的代码中添加了另一个更大的li，这样你就可以看到了。

.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
}

Demo:http://jsfiddle.net/QdEEf/1/

编辑：实际上，如果我真正理解了你的问题。您正在寻找一种确定

是否具有

作为子项的方法，然后在其上悬停（如果有）。如果是这种情况，则需要使用JavaScript来确定它是否具有
子项。无法使用CSS完成此操作

- Kierchon