logo标签列表

CSS :hover 只作用于嵌套结构的顶层 div

htmlcss
26

嗨：我有一些类似下面的HTML：

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

还有一些 CSS，例如：

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

当我悬停在内部

上时，两个
都会变成红色边框。是否有可能使用CSS停止事件传播并使内部
获得红色边框？

谢谢。

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

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

可惜这不是css，但它能够胜任。谢谢大家，虽然没有得到我想要的，但学到了很多新的东西。难怪stackoverflow如此伟大 :)

1
为什么两个div需要有相同的类？CSS规则将应用于具有“class”类的每个元素。创建不同的（虚拟）类名是否有帮助？ - PhD
2
请参考 http://stackoverflow.com/q/1327711/469210，了解如何在类似情况下使用JS停止事件传播。 - borrible
@Nupul：有各种各样的原因，虽然可以解决，但可能更容易使用JS实现。 - Patrick
7个回答
7

请查看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}
2
我正要粘贴这个东西，:D - Phil
8
我猜楼主希望在悬停在内部（绿色）div上时不要出现红色边框，对吗？我也打算粘贴这个东西 :) - PhD
1
给这个网站点赞，如果没有回答实际问题则扣分。 - BoltClock
+1 因为我不知道你可以像那样嵌套 CSS，但当我进入内部元素时，它不允许我更改外部元素的边框。 - Patrick
为什么类似的设置不起作用？我的父元素不会显示任何悬停变化，但所有子元素都会。 - Sam Alexander
显示剩余3条评论
5
以下选择器应该阻止鼠标悬停事件的传播。
div.class:not(:has(div.class:hover)):hover

它只选择那些带有class类的div，这些div正在被悬停，而其中没有一个子div也是带有相同class类的div，这个子div也是被悬停的。

因此，基本上你悬停在子元素上时，父元素不会被选择（或者换句话说，你停止了传播）。

唯一的缺点是，对于:has()伪类的浏览器支持还不够好（尤其是旧版本）-但我想随着时间的推移，这个问题会越来越小。

正好是我在找的，谢谢。也可以使用除了 div.class 之外的其他选择器。 - Virus721
5
如果内部的class是直接子元素，则可以使用>。如果不是直接子元素，则可以使用空格。
因此，在第一种情况下，使用.class > class:hover { }，而在第二种情况下，使用.class .class:hover { }。
第一种情况： http://jsfiddle.net/wp4Jf/ 第二种情况： http://jsfiddle.net/wp4Jf/2 请记住，>适用于ie8+。
@BoltClock 根据 http://reference.sitepoint.com/css/childselector 的说法，子选择器存在缺陷。而另一方面，quirksmode.org 表示它在 ie7 上可以正常工作。 - Sotiris
嗯，那是一个相当边缘的情况（可能被用作反 IE7 骇客）。在正常情况下它工作得很好。 - BoltClock
1

虽然这是一个旧问题，但对于那些来到这里的人，我通过重新思考HTML代码，使CSS样式更简单来解决了这个问题。当我创建嵌套的ul/li树形视图时，这种方法解决了我的问题。添加一个项目类别的div即可：

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

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

然后我可以将CSS应用于“item”类，由于“item”不在“item”内部，...在“item”内部，...在“item”内部，悬停选择器不会级联到节点链。因此，我可以在悬停时为我的树形视图项着色，而不会影响所有父项。
0

虽然 :has 在大多数主流浏览器中不被支持，但我做了一个解决方法，尽管它可能并不总是适用：嵌套元素具有不同的悬停颜色，即所有元素都将具有悬停效果，但它们不会合并。如果您预计会有超过5个级别，则可以继续添加更深层次的行：

.class:hover {background-color:#000}
.class .class:hover {background-color:#111}
.class .class .class:hover {background-color:#000}
.class .class .class .class:hover {background-color:#000}
.class .class .class .class .class:hover {background-color:#000}
-1
我通过重新调整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使它们看起来像嵌套的元素。

希望能对其他人有所帮助。

-1

当子元素被悬停或未被悬停时，您可以向父元素添加或删除CSS类。 因此，您可以侦听子元素的onmouseenter和onmouseleave事件，以设置父组件中的状态。然后，根据状态，您可以将“child-hovered”类添加到父元素。

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

.parent-div:not(.child-hovered):hover {
  background-color: gray;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接