媒体查询内设置的hover悬停效果失效，调整z-index仍无法正常触发

问题根因 #

你写的#color-code:hover #tooltip选择器逻辑是匹配#color-code内部的后代#tooltip元素，但从你提供的HTML结构来看，#tooltip是与.text-container同级的独立元素，并不在#color-code的嵌套范围内，因此该选择器永远无法匹配到元素，hover效果自然无法触发，与z-index取值无关。

解决方案 #

方案1（推荐，兼容性最优）：调整DOM结构 #

将#tooltip元素移到#color-code内部，原有CSS无需修改即可生效：

<div id="color-code" >
    linear-gradient(to right, #ade76d, #5f49bb)
    <div id="tooltip">
        Click to Copy
    </div>
</div>

额外建议：给#color-code添加position: relative属性，避免#tooltip的绝对定位参照根元素导致窗口缩放时位置偏移。

方案2（无需修改DOM，有兼容性要求）：调整CSS选择器 #

如果你不想改动现有DOM结构，可以修改媒体查询内的hover触发规则为如下内容：

/* 仅hover #color-code时触发，需要浏览器支持:has选择器（Chrome 105+、Safari 15.4+、Firefox 121+） */
.text-container:has(#color-code:hover) + #tooltip {
    visibility: visible;
    z-index:200
}

如果需要兼容更低版本浏览器，可以改为hover整个文本容器触发：

.text-container:hover + #tooltip {
    visibility: visible;
    z-index:200
}

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