Question

我遇到了悬停

的问题

我有3个孩子喜欢：

<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中。

Answer 1

让你的CSS更具体：

.parent:hover .child1, .parent:hover .child2 {
    color:#909090;
}

Answer 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并将其从其他标签中排除，请更具体。您可以为任何标记添加多个类。例如，让我们为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中的空格，它们非常敏感，如果没有谨慎使用，它可能完全意味着其他内容。

Answer 3

您可以尝试添加样式

.child3
{
    color : #000;
}

<强> DEMO

Answer 4

div.parent:hover > :not(.child3) {
    color:#909090;
}

Answer 5

.child1:hover, .child2:hover {
    color:#909090;
}

FIDDLE DEMO

Answer 6

 div.parent:hover .child1,div.parent:hover .child2{
    color: #909090;
}

Answer 7

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

尽管悬停应用于父div，但避免悬停在特定Child div上的效果

7 个答案: