2

我的代码可以将divs 添加为子级或兄弟级，我已经创建了两个类，并且: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>

4

6 回答 6

2

如果您将鼠标悬停在子元素上，那么您也将鼠标悬停在父元素上，这是无法解决的。

您可以做的是在第一个没有其他子元素的子元素上设置一个不同的或附加的类。

于 2013-08-09T12:08:49.000 回答
2

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

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

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

<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>pdivul

在这种情况下，上面显示的 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

于 2013-08-09T13:27:59.653 回答
0

最简单和最好的方法可能是使用任何其他元素，例如 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>
于 2013-08-09T16:02:18.433 回答
0

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

<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;
}

在这里查看演示

于 2013-08-09T12:13:29.110 回答
0

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

于 2013-08-09T12:15:12.800 回答
0

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

.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>

于 2018-03-05T15:29:36.893 回答