悬停事件将应用哪些属性？ [复制]答案

【问题标题】：Which properties will be applied on hover event? [duplicate]悬停事件将应用哪些属性？ [复制]
【发布时间】：2021-04-03 06:52:11
【问题描述】：

我有两个类，每个类都定义悬停事件。如果一个元素包含这两个类，哪些属性将应用于该元素。

.classA:hover{
  transform: translateX(10px);
  color: white;
}

.classB:hover{
  color: red;
}

<div class="classA classB"></div>

properites 会合并还是覆盖？

【问题讨论】：

color: red 和 transform 将起作用。但是是什么阻止了你自己测试它们？ :)
@m4n0 我想知道规则。
CSS 从上到下工作。所以当然第二个具有相同特性的选择器 - specifishity.com 会覆盖第一个。
基本上 css 优先顺序。多个类右侧的类名会覆盖它之前的属性。在样式表中，最后列出的类优先于它之前的类

标签： html css

【解决方案1】：

由于两个类具有相同的特异性，稍后定义的类将覆盖冲突的样式。

因此在您的示例中：

.classA:hover{
  transform: translateX(10px);
  color: white;
}

.classB:hover{
  color: red;
}

classB 稍后定义，因此color: red 将被应用，并且由于transform: translateX(10px) 不冲突，它也将被应用。

注意：

写<div class="classA classB"></div> 或<div class="classB classA"></div> 将产生相同的结果。

但如果类定义颠倒：

.classB:hover{
  color: red;
}

.classA:hover{
  transform: translateX(10px);
  color: white;
}

然后transform: translateX(10px) 和color: white 将被应用。

【讨论】：

【解决方案2】：

简单回答： 来自ClassA 的变换，来自ClassB 的红色将应用于元素的悬停事件。

答案不长： 由于ClassB 在ClassA 之后，它将优先于ClassA。这就是ClassB 的颜色将覆盖ClassA 的颜色的原因。由于ClassA 有一个变换，但ClassB 不会将来自ClassA 的变换应用于元素上的悬停事件。如果ClassB 也有一个转换属性，它将优先考虑并覆盖ClassA 中的转换。

希望您现在了解它的工作原理。 :)

【讨论】：