css:hover 只影响嵌套的顶部 div

Question

嗨：有一些 html 像：

<div class="class" >
    <div class="class" >
    </div>
</div>

还有一些 css 像：

div.class:hover
{
    border-width:2px;
    border-style:inset;
    border-color:red;
}

当我在内部 div 上 hover 时，两个 div 都有红色边框。 是否可以使用 css 停止传播并在内部 div 上获得红色边框？

谢谢。

编辑：从 borrible 指出的答案开始，我最终得到：

    $("div.class").mouseover(
        function(e) {
            e.stopPropagation();
            $(this).css("border-color", "red");
        }).mouseout(
        function() {
            $(this).css("border-color", "transparent");
        });

遗憾的是，它不是 css 而是完成了这项工作。 谢谢大家，没有得到我想要的东西，但学到了很多新东西。 堆栈溢出不是很好:)

Answer 1

看看http://jsfiddle.net/n6rzA/

那里的代码：

<div class="c">
    <div class="c"></div>
</div>

.c:hover {border:solid 1px red}
.c > .c:hover {border:solid 1px green}

Answer 2

如果内部class是直接子级，则可以使用> 。 如果它不是直接的孩子，你可以使用空间。

So in first case .class > class:hover { } and in second case .class.class:hover { }

第一种情况： http://jsfiddle.net/wp4Jf/

第二种情况： http://jsfiddle.net/wp4Jf/2

请记住>适用于 ie8+

Answer 3

老问题，但对于那些登陆这里的人，我通过重新考虑 html 来解决这个问题，以使 CSS 变得简单。 这解决了我在为嵌套的 ul/li 树视图创建 html/css 时的问题。 添加项目 class div：

<div class="class" >
    <div class="item">Parent</div>

    <div class="class" >
      <div class="item">Child</div>
    </div>
</div>

然后我可以将 CSS 应用于“项目” class 并且由于项目不在项目内，......在项目内，......在项目内，hover选择器不会级联。 所以我在 hover 上为我的树视图项目的背景着色，而不会溅到所有的父母。

Answer 4

我通过修改 html 并仅使用 css 得到了预期的结果。

HTML：

<div class="wrapper" > 
  <div class="parent"></div>
  <div class="child"></div>
</div>

CSS：

.wrapper {
  height: 500px;
  width: 500px;
  background-color: lightblue;
  position: relative;
}

.parent {
  height: 250px;
  width: 250px;
  background-color: lightgreen;
  top: 3em;
  left: 3em;
  position: absolute;
}

.parent:hover {
  border: 3px red solid;
}

.child {
  height: 50px;
  width: 50px;
  background-color: lightgrey;
  top: 5em;
  left: 5em;
  position: absolute;
}

.child:hover {
  border: 3px red solid;
}

https://jsfiddle.net/rafaelrozon/pynngjpk/

基本上，它们可以是兄弟而不是嵌套 div，然后您可以使用 css 使它们看起来嵌套。

我希望它可以帮助其他人。