CSS :hover时如何仅触发当前元素之前的多个同级类元素相同效果

核心思路：利用flex-direction: row-reverse颠倒元素的视觉展示顺序，让DOM中排在后面的元素视觉上出现在左侧，就可以用通用兄弟选择器~选中所有DOM层面后续（即视觉层面前置）的元素，完美解决CSS没有前置选择器的问题。

修改后HTML代码 #

你只需要给图标新增共同父容器，颠倒图标DOM顺序即可，视觉展示效果和原有结构完全一致：

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="icon-group">
  <div class="icon-item icon4"><i class="glyphicon glyphicon-envelope"> </i></div>
  <div class="icon-item icon3"><i class="glyphicon glyphicon-user"></i></div>
  <div class="icon-item icon2"><i class="glyphicon glyphicon-remove"></i></div>
  <div class="icon-item icon1"><i class="glyphicon glyphicon-cloud"></i></div>
</div>
</body>
</html>

对应CSS代码 #

/* 父容器设置反向flex布局，让图标视觉顺序恢复为icon1到icon4从左到右 */
.icon-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.icon-item {
  padding: 5px;
  cursor: pointer;
}
.icon-item i {
  transition: color 0.3s ease;
}
/* hover时同时选中自身和所有视觉上排在前面的图标 */
.icon-item:hover i,
.icon-item:hover ~ .icon-item i {
  color: #28a745;
}

该方案无额外JS开销，可维护性高，后续新增图标只需要调整DOM顺序，不需要修改CSS选择器。

如果你不想修改原有DOM结构，可以用JS实现，适配性更强：

调整后HTML（仅新增共同类名即可，不用改顺序） #

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="icon-item icon1"><i class="glyphicon glyphicon-cloud"></i></div>
<div class="icon-item icon2"><i class="glyphicon glyphicon-remove"></i></div>
<div class="icon-item icon3"><i class="glyphicon glyphicon-user"></i></div>
<div class="icon-item icon4"><i class="glyphicon glyphicon-envelope"> </i></div>
</body>
</html>

对应CSS代码 #

.icon-item {
  float: left;
  padding: 5px;
  cursor: pointer;
}
.icon-item i {
  transition: color 0.3s ease;
}
/* 激活状态样式 */
.icon-item i.active {
  color: #28a745;
}

JS代码 #

const icons = document.querySelectorAll('.icon-item');
icons.forEach((icon, index) => {
  // 鼠标移入时给当前元素和所有前置元素加激活类
  icon.addEventListener('mouseenter', () => {
    for(let i = 0; i <= index; i++) {
      icons[i].querySelector('i').classList.add('active');
    }
  })
  // 鼠标移出时清空所有激活类
  icon.addEventListener('mouseleave', () => {
    icons.forEach(item => item.querySelector('i').classList.remove('active'))
  })
})

内容的提问来源于stack exchange，提问作者E.D