如何在hover元素时同时影响多个不同类名的元素？

完全可以实现，以下是几种无冗余、易维护的方案：

方法1：使用CSS :has() 伪类（灵活跨层级） #

:has() 伪类能基于子元素的状态选择父容器，从而批量修改容器内所有目标元素的样式，无需重复编写hover关联规则。

同容器场景示例 #

HTML

<div class="control-group">
  <button class="hover-trigger">鼠标悬停我</button>
  <div class="card-item">卡片内容</div>
  <p class="desc-text">描述文本</p>
  <span class="icon-btn">操作图标</span>
</div>

CSS

/* 触发按钮hover时，批量修改容器内所有目标元素 */
.control-group:has(.hover-trigger:hover) .card-item,
.control-group:has(.hover-trigger:hover) .desc-text,
.control-group:has(.hover-trigger:hover) .icon-btn {
  color: #2563eb;
  display: flex;
  border-color: #2563eb;
}

跨容器分组场景示例 #

HTML

<button data-hover-group="action1">悬停触发</button>
<div class="box-a" data-hover-group="action1">Box A</div>
<p class="text-b" data-hover-group="action1">Text B</p>

CSS

/* 跨层级选中同组目标元素（排除触发元素自身） */
body:has([data-hover-group="action1"]:hover) [data-hover-group="action1"]:not([data-hover-group="action1"]:hover) {
  color: #dc2626;
  display: block;
}

方法2：CSS变量（最简洁无冗余） #

通过定义全局样式变量，在触发hover时更新变量值，所有目标元素直接引用变量，彻底避免重复选择器。

CSS

/* 定义默认样式变量 */
:root {
  --target-color: #333;
  --target-display: inline;
  --target-border: none;
}

/* 触发hover时更新变量 */
.hover-trigger:hover {
  --target-color: #dc2626;
  --target-display: block;
  --target-border: 1px solid #dc2626;
}

/* 所有需要被影响的元素统一引用变量 */
.box-a, .text-b, .icon-c, .any-other-class {
  color: var(--target-color);
  display: var(--target-display);
  border: var(--target-border);
  transition: all 0.3s ease;
}

该方法无需修改HTML结构，只需给目标元素添加变量引用即可，代码量极少。

方法3：自定义属性选择器（批量匹配元素） #

给所有需要被影响的元素添加统一的自定义属性，用属性选择器一次性选中所有目标元素。

HTML #

<button class="hover-trigger">悬停我</button>
<div class="box-a" data-hover-target></div>
<p class="text-b" data-hover-target></p>
<span class="icon-c" data-hover-target></span>

CSS #

/* 触发hover时，选中所有带data-hover-target属性的同级元素 */
.hover-trigger:hover ~ [data-hover-target] {
  color: #16a34a;
  display: inline-block;
}

注：~ 是兄弟选择器，仅对触发元素之后的同级元素生效；若需跨层级，可结合:has伪类实现。

兼容性说明 #

• :has() 伪类：支持Chrome 105+、Firefox 121+、Safari 15.4+，现代项目可放心使用。
• CSS变量：支持IE11以外的所有现代浏览器，兼容性更广。

内容的提问来源于stack exchange，提问作者Alper Uluses