使用CSS变量实现非关联元素悬停显隐的方法

原有写法失效原因 #

CSS自定义属性（CSS变量）存在DOM作用域限制：你在#copyright-ft:hover下修改的--copy-vsb变量，仅对#copyright-ft自身和它的后代元素生效。但#copyright-ft-details是和前者平级、无嵌套的独立元素，无法读取到这个被修改的变量值，自然不会触发显示效果。

纯CSS实现方法 #

完全不需要JavaScript，利用CSS兄弟选择器即可实现，你的HTML结构里两个元素正好是前后相邻的兄弟节点，适配性很好。

修正后的代码 #

首先调整CSS，去掉作用域失效的CSS变量写法，改用相邻兄弟选择器匹配hover状态：

#copyright-ft
{
    position: absolute; 
    overflow: visible; 
    font-family: roboto, cus-roboto, sans-serif; 
    font-size: 70px; 
    padding-left: 25px; 
    padding-right: 22px; 
    color: rgba(0,0,0,0.45); 
    border: 4px rgba(236,96,202,0.24) solid; 
    border-radius: 80px; 
    top: 14px; 
    left: 25px; 
    padding-top: 10px; 
    padding-bottom: 7px;
}
#copyright-ft-details
{
    position: absolute; 
    overflow: visible; 
    font-family: roboto, cus-roboto, sans-serif; 
    font-size: 40px; 
    padding-left: 35px; 
    padding-right: 35px; 
    color: rgba(255,255,255,0.7); 
    border: 0px rgba(236,96,202,0.24) solid; 
    border-radius: 10px; 
    top: 325px; 
    left: 120px; 
    padding-top: 15px; 
    padding-bottom: 15px;
    background: rgba(0,0,0,0.7);
    /* 默认隐藏 */
    visibility: hidden;
}
/* 匹配悬停元素后方相邻的详情块，设置为显示 */
#copyright-ft:hover + #copyright-ft-details
{
    visibility: visible;
}

小提示：你当前的HTML写法存在规范问题——行内元素<span>不能嵌套块级元素<p>，建议把#copyright-ft的标签从<span>改成<div>，避免不同浏览器出现渲染异常。

扩展优化 #

如果想要实现平滑的淡入淡出效果，可以把visibility替换为opacity搭配pointer-events，支持CSS过渡动画：

#copyright-ft-details
{
    /* 替换原有visibility属性 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    /* 其余原有样式保持不变 */
}
#copyright-ft:hover + #copyright-ft-details
{
    /* 替换原有visibility属性 */
    opacity: 1;
    pointer-events: auto;
}

如果后续两个元素中间插入了其他平级节点，只需要把相邻兄弟选择器+换成通用兄弟选择器~即可，只要详情节点在触发节点的DOM位置之后，就能被正常选中。

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