如果没有父母的悬停被激活，我怎样才能在孩子中使用？

Question

我的代码可以添加divs作为孩子或兄弟，我为每个类创建了两个类和两个:hover但是当我将鼠标放在一个孩子上时，父hover也被激活。

.Group {
  background-color: white;
}

.Group2 {
  background-color: white;
}

.Group:hover {
  background-color: yellow;
}

.Group2:hover {
  background-color: red;
}

<div class="Group">
  root
  <div class="Group">1st child
    <div class="Group2">2nd child
      <div class="Group">3rd child</div>
    </div>
  </div>
  <div class="Group">1st child</div>
</div>

Answer 1

如果将鼠标悬停在子元素上，您也将鼠标悬停在父元素上，则无法绕过它。

你可以做的是在没有更多孩子的第一个子元素上设置一个不同的或额外的类。

Answer 2

悬停时突出显示嵌套块中的背景颜色

如果您尝试激活嵌套的div块的背景颜色，我想您可能正在寻找以下内容。

对于HTML，使用不同的类名来标识嵌套的div块的每一层：

<div class="Group">root
    <div class="Group1">1st child
        <div class="Group2">2nd child
            <div class="Group3">3rd child</div>
        </div>
    </div>
    <div class="Group1">1st child</div>
</div>

和CSS：

.Group, .Group1, .Group2, .Group3 {
    background-color:transparent;
}
.Group:hover {
    background-color:yellow;
}
.Group1:hover {
    background-color:pink;
}
.Group2:hover {
    background-color:red;
}
.Group3:hover {
    background-color:orange;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/Scr9G/

当您连续鼠标悬停在每个嵌套的div上时，背景颜色会按顺序变化。

如果您尝试使用:hover来定位嵌套元素而不会通过父/祖先块冒泡，则需要使用JavaScript / jQuery来创建所需的选择规则。

Quirky Hack使用<p>标签

以下结构展示了OP希望看到的行为：

<p class="Group">root
    <p class="Group">1st child
        <p class="Group2">2nd child
            <p class="Group">3rd child</p>
        </p>
    </p>
    <p class="Group">1st child</p>
</p>

CSS和以前一样：

.Group {
    background-color:white;
}
.Group2 {
    background-color:white;
}
.Group:hover {
    background-color:yellow;
}
.Group2:hover {
    background-color:red;
}

第二个演示小提琴：http://jsfiddle.net/audetwebdesign/cf2mn/

在这种情况下，OP试图嵌套<p>标签，这实际上不像嵌套其他块元素如<div>。

当使用<p>标签时，关闭</p>标签是可选的，如果跟随其他流量元素，如p，div，ul等。

在这种情况下，上面的HTML代码段相当于：

<p class="Group">root</p>
<p class="Group">1st child</p>
<p class="Group2">2nd child</p>
<p class="Group">3rd child</p>
<p class="Group">1st child</p>

这意味着所有p选项卡都是兄弟姐妹，并且没有父子关系，这就是CSS看起来像OP所需的原因。

如果使用div标签而不是p标签，则生成的DOM将展示父子关系，并且CSS将显示OP不想要的原始行为。

使用p标签可以为CSS提供所需的效果，但它只能因为DOM元素是兄弟而不是父子。 （此外，嵌套的p标签不会验证。）

值得一提的是：

CSS 2.1没有定义'：active'或'：hover'元素的父元素是否也处于该状态。

因此，最好不要在子元素上应用伪元素时依赖父元素的状态。

参考文献：

关于:hover：http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

关于p标签的可选关闭：http://www.w3.org/TR/html-markup/p.html#p

Answer 3

没有办法阻止父元素获得背景颜色..而是使用此代码

<div class="root">
Main Root
<div class="group">
    First One
</div>
<div class="group2">
    Second One
</div>
<div class="group">
    Third One
</div>

.group:hover {
    background: yellow;
}
.group2:hover {
    background: red;
}

SEE THE DEMO HERE

Answer 4

为div提供单独的id，当子div悬停时，更改其背景图像颜色并同时删除父级的背景颜色。我想这是解决这个问题的唯一方法

Answer 5

最简单和最好的方法可能是使用任何其他元素，例如li。

CSS：

.Group, .Group2, .Group3
{
background:white;
display: block;
list-style: none;
}
.parent
{
margin: 0;
display: block;
padding: 0;
}
.Group:hover
{
background: yellow;
}
.Group2:hover
{
background: red;
}
.Group3:hover
{
background: yellow;
}

HTML：

<ul class="parent" >
<li class="Group" >root
  <li class="Group">1st child
    <li class="Group2">2nd child
      <li class="Group3">3rd child</li>
    </li >
  </li >
  <li class="Group">1st child</li >
</li>
</ul>

Answer 6

您应该为内容添加子元素并使用element+element伪选择器。

.group-content:hover {
  background-color: yellow;
}

.group-content:hover + .group {
    background-color: red;
}

<div class="group">
  <div class="group-content">1st child</div>
  <div class="group">
    <div class="group-content">2nd child</div>
    <div class="group">
      <div class="group-content">3nd child</div>
    </div>
  </div>
</div>
<div class="group">
  <div class="group-content">1st child</div>
</div>