Discord Widget CSS悬停与移出双向过渡效果无法生效问题咨询

问题原因 #

你的代码存在两处语法错误，该问题和Discord Widget本身特性无关：

• 选择器语法错误：.disc-widget :hover 中间多余空格属于CSS后代选择器规则，实际匹配的是.disc-widget内部所有子元素的悬停状态，而非组件本身的悬停，导致鼠标移出时组件本身无对应的过渡规则触发，直接回弹到初始状态。
• transition属性语法错误：transition: all transform 0.5s 不符合规范，all是代表所有属性都参与过渡的关键字，不能和具体属性transform同时放在属性声明位，二者只能选其一。

修正后的代码 #

.disc-widget {
    position: fixed;
    top: 16%;
    right: 75px;
    border-radius: 5px;
    /* 仅对transform属性做0.5秒平滑过渡，需要过渡其他属性可以改成all 0.5s */
    transition: transform 0.5s;
} 

/* 去掉中间空格，匹配组件本身的悬停状态 */
.disc-widget:hover {
    transform: scale(1.1);
}

补充说明 #

如果修正后仍无效果，可以检查Discord Widget是否为跨域iframe加载，浏览器默认禁止父页面的hover事件传递到跨域iframe，这种情况可以给.disc-widget外层套一个自定义父容器，将hover和过渡规则绑定到父容器上即可正常生效。

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