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

Question

我的代码可以添加div作为孩子或兄弟姐妹，我为每个班级创建了两个班级和两个: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来创建所需的选择规则。

使用<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>

使用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>