这里我用bootstrap 5来创建我的导航栏,当屏幕变小时,它会折叠。所以我在导航元素上做了一个小的悬停效果。然而,当它们折叠时,我的悬停效果会占用整个空间,因为你可以看到结果,我只想让悬停效果只在单词下面。我试图修复这个问题,你可以在CSS代码的末尾看到我的解决方案,但它不起作用。第一个我尝试了几种方法,但都不起作用,在CSS代码中,我把我的解决方案留在了最后。
vwkv1x7d1#
在CSS中:你让李拿显示:块,所以它占据了整个屏幕的宽度。display:inline-block应该可以解决这个问题并减小max-width。
@media (max-width:991px) { ul li::after { content: ""; height: 2px; background-color: #009688; margin: auto; display: inline-block; width: 0%; transition: 1s; } ul li:hover::after { max-width: 20%; cursor: pointer; }
1条答案
按热度按时间vwkv1x7d1#
在CSS中:
你让李拿显示:块,所以它占据了整个屏幕的宽度。display:inline-block应该可以解决这个问题并减小max-width。