问题描述
我遇到一个CSS问题,无法调试。我在主导航中的悬停上做了一个“突出显示”效果,它似乎突出显示了文本的后面和下方。一切正常。
但是在两个较长的导航链接上,退出悬停状态会导致文本似乎从右侧滑入,就像在悬停状态结束时缩小并展开一样。
您可以在上面的gif中看到这一点-悬停状态可以完美运行,但是当离开悬停状态时,第二个和第四个导航链接中的文本似乎会从右侧重置并滑入。
我对此很困惑-我从未见过这样的东西,这个主题(Astra)对我来说是新的。显然,悬停状态与非悬停状态有所不同。也许这与导航文本对齐正确有关吗?我不知道:/
您可以在https://allytutoring.com/writing-resources/
上实时观看解决方法
问题在于您的悬停效果:在:before选择器中,将鼠标悬停时,将位置设置为“绝对”,这意味着当该项目未悬停时,内容即为位置是静态的-因此可以“推送”您的菜单项。
您应该尝试将所有不会改变的内容都置于初始状态,而仅将更改的css属性添加到您的悬停选择器中:
#primary-menu .menu-link::before { /* This is your initial state */
content: '';
display: block;
width: 0;
position: absolute;
background-color: rgba(47,139,255,0.8);
height: .8em;
top: 1.5em;
left: 5%;
z-index: 1;
transition-duration: .25s;
}
#primary-menu .menu-link:hover::before { /* This is your hover state */
width: 0;
}