SCSS中:hover设置display:block无响应 代码无法正常编译

问题表现 #

• 编写ul、li导航类样式时，给a标签设置display:block属性后，:hover伪类修改color属性可正常生效，但修改display属性无响应
• 相同逻辑写法在原生CSS中可正常运行，无异常

可正常运行的SCSS代码 #

a{
    display: block;
    color:bisque;
}
li{
    display: flex;
    justify-content: center;
    justify-content: center;
    justify-items: center;
    flex-flow: column;
    z-index:1;
    ul{ 
        display:block;
        flex-flow: column;
        a{ 
            &:hover{
                color:red;
            }
        }
    }
    a{
        text-decoration: none;
        color:rgb(255, 255, 255);
    }
}

触发失效的SCSS代码 #

ul{ 
    display:none;
    flex-flow: column;
    &:hover{
        display:block;
    }
}
a{
    text-decoration: none;
    color:rgb(255, 255, 255);
}

问题原因 #

这个问题和SCSS预处理器本身无关，SCSS最终编译输出的CSS和手写原生CSS逻辑完全一致，失效是CSS逻辑本身的问题：
当元素设置display:none时，会完全从页面渲染流中移除，不占据任何空间、不响应任何鼠标交互，鼠标根本无法“悬停”在一个不存在于渲染流的元素上，自然无法触发元素自身的:hover状态切换display属性。
所谓原生CSS下写法正常，通常是因为原生CSS代码中把hover触发逻辑绑定在了ul的可见父元素（比如外层li）上，而非绑定在本身就隐藏的ul元素上。

修复方法 #

将hover触发节点绑定到ul的可见父元素上，通过父元素的hover状态控制子级ul的显示隐藏，参考代码：

li{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    z-index: 1;
    ul{ 
        display: none;
        flex-flow: column;
    }
    // 绑定在可见的父级li上，hover时控制内部ul显示
    &:hover ul{
        display: block;
    }
    a{
        display: block;
        text-decoration: none;
        color: rgb(255, 255, 255);
        &:hover{
            color: red;
        }
    }
}

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