CSS实现按钮hover时文字变色效果失效的解决方法

原有CSS存在3个核心错误，导致效果无法生效：

• 类选择器语法错误：button:hover third 中third是自定义class，选择器必须加类标识.，正确写法为.third，缺省符号会导致浏览器将其识别为自定义标签，无法匹配目标元素。
• 触发条件冗余错误：div:hover .button:hover .third 额外绑定了div悬停、.button类元素悬停两个无关条件，和「仅悬停button触发效果」的需求完全冲突，且.button类选择器和原生标签不匹配。
• 选择器层级逻辑错误：未根据.third和button的实际DOM位置写对应匹配规则，无法正确关联悬停行为和目标元素。

根据.third和button的常见位置关系，分两种场景写对应代码即可：

场景1：.third是button内部的后代元素 #

对应HTML结构参考：

<button>
  按钮
  <span class="third">悬停按钮时我会变色</span>
</button>

可直接生效的CSS代码：

.third {
    /* 修正原rgb语法的逗号缺失问题，兼容更低版本浏览器 */
    color: rgb(41, 3, 0);
    text-shadow: inherit;
    /* 明确指定仅color属性触发过渡，减少不必要的性能消耗 */
    transition: color 1.5s;
}

/* 匹配button悬停时，其内部所有class为third的后代元素 */
button:hover .third {
    color: rgb(255, 0, 0);
}

场景2：.third是button的同级兄弟元素（位于button之后） #

对应HTML结构参考：

<button>悬停触发</button>
<p class="third">我是和按钮同级的变色内容</p>

可直接生效的CSS代码：

.third {
    color: rgb(41, 3, 0);
    text-shadow: inherit;
    transition: color 1.5s;
}

/* +为相邻兄弟选择器，匹配button紧邻的后方.third元素；
如果.third和button中间隔了其他元素，把+换成~通用兄弟选择器即可 */
button:hover + .third {
    color: rgb(255, 0, 0);
}

注意：CSS不支持向前选择父元素/前面的兄弟元素，如果.third在button的父级层级、或者位于button之前，纯CSS无法实现该交互，需要配合JS处理。

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