div：悬停并覆盖分配给同一 div 的另一个类样式答案

【问题标题】：Div:hover and overwrite another class style assigned to the same divdiv：悬停并覆盖分配给同一 div 的另一个类样式
【发布时间】：2018-01-20 02:50:37
【问题描述】：

我刚刚遇到了这个问题，我不知道如何覆盖另一个类的样式，即悬停在同一 div 的另一个类上的背景颜色。我的例子：

<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>

shapeClass 类定义形状，bgTransparentGrey 类定义背景颜色。在 shapeClass:hover 上，我想更改 bgTransparentGrey 类的样式，但仅限于悬停的元素。

最好的塔西洛

【问题讨论】：

你的问题没有任何意义。类没有值。您是否在问如何从 classToBeEditedOnHover 中删除 div 并将其添加到另一个？你需要 JavaScript 来做到这一点。
可能是错误的词。我试图改变，即当用纯css悬停“classToDetectHover”时“classToBeEditedOnHover”的背景颜色。两个类都附加到同一个元素
这仍然没有意义。您将鼠标悬停在一个元素上，而不是一个类上。
嗯？我的意思是 .classToDetectHover:hover .classToBeEditedOnHover{
你是不是真的想说，当这个特定的 div 元素与班级classToDetectHover 悬停？这通常使用 CSS 是不可能的（对于 DOM 结构中正确位置的元素来说，这将是有限的方式），你需要 JS。

【解决方案1】：

您不能使用 Javascript 即时编辑类的属性。您将需要编写一个额外的类来覆盖其他样式。

$('.container-styles').hover(function(){
  $(this).addClass('overwrite-styles');
}, function(){
  $(this).removeClass('overwrite-styles');  
})

.container-styles {
  background-color: red;
  height: 100px;
}

.overwrite-styles {
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container-styles"></div>

【讨论】：

【解决方案2】：

您可以使用此选择器，它只会影响具有 BOTH 类的元素：

.boxElement.bgTransparentGrey { ... }

如果您将其放置在样式表中单个类的规则之下/之后，其中的设置将覆盖之前的设置。

（注意：类之间没有空格，因此仅适用于两个类都分配给同一个元素时）

【讨论】：