Question

嗨：得到一些类似的HTML：

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

还有一些css喜欢：

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

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

感谢。

编辑：从可怕的答案开始我最终得到：

    $("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是直接孩子，您可以使用>。如果它不是直接的孩子，你可以使用空间。

首先是.class > class:hover { }，第二种是.class .class:hover { }

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

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

请注意，>适用于ie8 +

Answer 3

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

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

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

然后我可以将CSS应用于“item”类，因为item不在item，... in item，... in item中，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使它们看起来是嵌套的。

我希望它可以帮助别人。

Answer 5

无论是否悬停子级，您都可以向父级添加或删除 CSS 类。因此，您可以监听孩子的 onmouseenter 和 onmouseleave，以便在您的父组件中设置状态。然后，根据状态，您可以将“child-hovered”类添加到父类。

在父级的 CSS 中，您可以检查它是否被悬停并且没有“child-hovered”类：

.parent-div:not(.child-hovered):hover {
  background-color: gray;
}

css：悬停只影响巢的顶部div

5 个答案: