2

我有悬停问题

我有 3 个子 div，例如：

<div class="parent">
    <div class="child1">A</div>
    <div class="child2">B</div>
    <div class="child3">C</div>
</div>

我已将鼠标悬停在 parant div 上以更改 child1 和 child2 div 的颜色。然而，悬停也适用于 child3 div....

有没有办法单独排除在 child3 上的悬停？

任何帮助表示赞赏。提前致谢。

div.parent:hover {
    color: #909090;
}

在上面的示例中，字体“C”的颜色必须没有变化，尽管它存在于 parant div 中。

4

7 回答 7

5

让你的 CSS 更具体：

.parent:hover .child1, .parent:hover .child2 {
    color:#909090;
}
于 2013-08-28T09:40:10.900 回答
2 
div.parent:hover {
    color:#909090;
}

您的 CSS 说“选择带有类父级的 DIV 标签并仅在悬停状态下应用以下 CSS，然后将字体颜色更改为 #909090”。

首先，如果您想在孩子上悬停状态，请执行以下操作：

/* explanation: select DIV tags with "child" class on hover state */
div.parent div:hover {
    /* apply your CSS here */
}

如果您想为某些标签制作特定的 CSS 并将其从其他标签中排除，请更加具体。您可以向任何标签添加 1 个以上的类。例如，让我们为特殊悬停状态的 child1 和 child2 添加另一个类，并为 child3 排除它：

<div class="parent">
    <div class="child1 myHoverClass"></div>
    <div class="child2 myHoverClass"></div>
    <div class="child3"></div>
</div>

现在很容易用 CSS 控制它：

/* explanation: find parent class div, then select children DIV tags with class name "myHoverClass" and apply CSS for hover state only.. in this case, only child1 and child2 DIV tags */
div.parent div.myHoverClass:hover {
    /* apply your CSS here */
}

注意：注意 CSS 中的空格，它们非常敏感，如果不谨慎使用，它可能完全意味着其他东西。

于 2013-08-28T09:59:32.640 回答
1

您可以尝试添加样式

.child3
{
    color : #000;
}

演示

于 2013-08-28T09:41:08.167 回答
0 
div.parent:hover > :not(.child3) {
    color:#909090;
}
于 2013-08-28T09:41:58.937 回答
0 
.child1:hover, .child2:hover {
    color:#909090;
}

小提琴演示

于 2013-08-28T09:48:04.767 回答
0 
 div.parent:hover .child1,div.parent:hover .child2{
    color: #909090;
}
于 2013-08-28T10:16:14.613 回答
0

添加一个不同的类，child1这样child2可能是：

<div class="parent">
    <div class="test child1"></div>
    <div class="test child2"></div>
    <div class="child3"></div>
</div>

.test:hover{background-color:red;}
于 2013-08-28T10:25:38.890 回答