Html 通过将悬停应用于父div，避免特定子div上的悬停效果

我对hover有意见

我有三个孩子，比如：

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

---

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

只需使CSS更具体：

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

---

您可以尝试添加样式

.child3
{
    color : #000;
}

你的CSS是说选择带有类父的DIV标签，并仅在悬停状态下应用以下CSS，然后将字体颜色更改为9090

首先，如果要在子对象上显示悬停状态，请执行以下操作：

/* 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中的空格，它们非常敏感，如果不小心使用，可能完全意味着其他内容。

为child1和child2添加不同的类，如下所示：

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

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

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

---

这一点很好，但请注意，它也与其他选择器合并在一起，因此可能不是真正的表示形式：高级元素选择使用诸如：nth child、：last child、：first of type等选择器。如果没有>子组合符，这将选择除.child3 div本身之外的所有子代，但包括它的孩子们等等。@robooneus进一步说明了浏览器的兼容性：：hover除了旧版本IE中的元素外，其他任何东西都不支持；IE7和IE6都可以：在非锚上悬停，IE6就像死了一样，真的；Internet Explorer会为此发火：您是否希望即使在悬停3时，颜色也仅应用于1和2？还是只希望悬停的子对象更改除3以外的颜色？

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

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

/* 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 */
}

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

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

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