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

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

您只希望在“项目 1”内的 :hover 效果对吗？

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

还要检查这个 Fiddle。

已更新（根据您的评论）

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

并更新了 Fiddle。然而，当悬停时，这也会触发“项目 1.1.1”的跨度......

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

我想这就是你想要的。我在我的小提琴中添加了另一个更大的 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
}

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

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