如何用CSS实现悬停父div显示图标、悬停图标切换激活态样式

你的代码不生效的核心原因是CSS选择器优先级冲突：#parent:hover .info-icon 的选择器权重远高于 .info-icon:hover，导致你给图标设置的悬停激活背景被更高优先级的透明图标背景覆盖了。

额外注意：HTML中div不属于可自闭合标签，建议把<div class="info-icon"/>改为标准闭合的<div class="info-icon"></div>，避免部分低版本浏览器解析异常。

方案1：调整选择器优先级（推荐） #

直接把图标悬停的选择器权重提高到和父级悬停的选择器权重一致，同时删掉冗余的重复背景声明即可，修改后的完整代码如下：

HTML代码 #

<div>
    <div id="parent">
        <span class="hover-text">Some Text to hover</span>
        <div class="info-icon"></div>
    </div>
</div>

CSS代码 #

#parent {
  &:hover {
    background-color: #016E69;
  }
 }
 
 #parent:hover .info-icon { 
    display: block;
    cursor: pointer;
    /* 删掉了重复的background属性，避免优先级冲突 */
  }

.info-icon{
   background: url(../assets/info-icon-transparent.png);
   width: 24px;
   height: 24px;
   float: left;
   margin-top: 6px;
   display: none;
   margin-left: 12px;
}

/* 提高选择器权重，覆盖父级悬停的背景设置 */
#parent:hover .info-icon:hover {
   background: url(../assets/info-icon-active.png);
}

方案2：用!important强制覆盖（仅临时应急使用，不推荐常规场景使用） #

如果不想调整选择器结构，可以在图标悬停的背景属性后加!important强制提升优先级：

.info-icon:hover {
   background: url(../assets/info-icon-active.png) !important;
}

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