如何实现父元素hover时同时触发自身及子元素的CSS样式过渡

嘿，问题出在图标的hover选择器上——你现在是给图标自身加的hover效果，但我们需要的是当父元素.list-group-item-card被悬停时，同时触发左边框和子图标的颜色变化。

只需要修改CSS里的图标hover规则，把它绑定到父元素的hover状态上就行，具体调整如下：

修改后的CSS代码 #

/* 父元素基础样式，合并transition避免覆盖 */
.list-group-item-card { 
  transition: all 0.5s ease; 
  border-left: 10px solid #bfbfbf !important; 
}
/* 父元素悬停时的左边框颜色 */
.list-group-item-card:hover { 
  border-left-color: #9cbe4f !important; 
}
/* 图标基础样式，保留过渡效果 */
.list-group-item-card .list-group-icon { 
  transition: color 0.5s ease; 
  color: #bfbfbf; 
}
/* 关键修改：父元素悬停时修改图标颜色 */
.list-group-item-card:hover .list-group-icon { 
  color: #9cbe4f; 
}

为什么这样改？ #

• 原来的.list-group-item-card .list-group-icon:hover只会在鼠标直接悬停在图标上时触发变色，现在换成.list-group-item-card:hover .list-group-icon，意思是当.list-group-item-card被悬停时，它下面的.list-group-icon元素改变颜色。
• 另外我把父元素的两个transition合并成了一个all（之前的border-left-color会被后面的all覆盖，没必要重复写），这样所有可过渡的属性都会有0.5秒的平滑动画。

效果验证 #

现在当你把鼠标放到整个li元素（不管是图标区域还是文字区域），左边框和图标会同时从#bfbfbf过渡到#9cbe4f，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Bryan Dellinger