如何实现双层悬停效果？解决父级悬停覆盖子级样式问题

问题分析 #

当鼠标悬停在.forwardArrow上时，其父元素.forwardArrowContainer也会处于hover状态。此时.forwardArrowContainer:hover .forwardArrow的选择器权重（类+伪类+类，权重值0,2,0）高于.forwardArrow:hover（类+伪类，权重值0,1,0），导致子元素的hover样式被父元素的hover样式覆盖，无法生效。

解决方案 #

使用更具特异性的选择器，同时匹配父元素hover和子元素hover的状态，让该选择器的权重高于父元素单独hover的规则，从而正确应用子元素的hover样式。另外建议将过渡效果放在.forwardArrow的基础样式中，确保所有状态切换都有平滑动画。

修改后的CSS代码：

.forwardArrowContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; 
}

.forwardArrow {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition-duration: 1s; /* 统一设置过渡效果 */
}

.forwardArrowContainer:hover .forwardArrow{
    opacity: 0.3; /* 匹配需求的悬停父元素时的透明度 */
}

/* 更高权重的选择器，确保子元素hover样式优先生效 */
.forwardArrowContainer:hover .forwardArrow:hover {
    opacity: 1;
    color: rgba(209, 130, 34, 1);
}

效果说明 #

• 悬停父元素.forwardArrowContainer时，.forwardArrow的opacity从0平滑过渡到0.3
• 悬停.forwardArrow自身时，opacity会从0.3平滑过渡到1，同时颜色变为指定的橙色

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