div内的链接元素hover时transform:translate属性不生效问题

问题根因 #

transform CSS属性仅对块级元素、行内块元素、弹性元素等支持盒模型变换的元素生效，<a> 标签默认为行内（inline）元素，默认不支持transform属性，所以你写的translateY效果无法触发。你之前未用div包裹时效果生效，大概率是当时有其他全局样式隐式修改了a标签的display属性。

修复方案 #

给 .navbar__link 类新增 display: inline-block 声明即可，该属性既保留a标签行内排列的特性，又使其支持transform变换。同时建议把transition声明挪到默认样式规则中，这样鼠标移入、移出元素时都有平滑过渡效果。

修改后的完整CSS代码如下：

.navbar__link{
    /* 新增以下声明解决transform不生效问题 */
    display: inline-block;
    text-decoration: none;
    color: white;
    /* transition挪到默认态，移入移出都有过渡 */
    transition: all .2s;
}

.navbar__link:hover{
    color: white;
    transform: translateY(-4px);
}

额外排查项 #

如果修改后效果依然不生效，可以排查以下两点：

• 父级navbar__leftside/navbar__rightside容器是否设置了overflow: hidden，遮挡了位移后的元素
• 是否有其他更高优先级的CSS规则覆盖了.navbar__link的display或者transform属性

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