如何让我的 NAV 文本在悬停时停止移动？

Posted 2023-03-06

【中文标题】如何让我的 NAV 文本在悬停时停止移动？

【英文标题】：How can I get my NAV text to stop moving on hover?

【发布时间】：2013-09-02 13:26:02

【问题描述】：

我在悬停时在my nav links 上方添加了一个边框/线，但现在每次悬停时它都会将我的文本向下移动。是什么原因造成的？

#nav a:hover
border-top:solid 4px #3b5998; 
color:#b7c3e6; 
padding: 6px


.header-alignment-left.header-navigation-split #topNavposition:absolute; right:-15px

.logo-image #topNav nav li apadding:5px 15px; line-height:100%
#nav aborder-top:0px solid transparent
#nav .subnavmargin-top:0

#nav aborder-right:1.5px solid #3b5998; height:20px
#nav li:last-child aborder-right:0

#topNav nav .folder ul li a    
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out  

#header #topNav nav .folder ul lipadding:0 24px 12px; position:relative;  
#headermargin-top:20px !important
#topNavmargin-top:40px
#nav .subnav ulpadding-bottom:15px !important
#nav .subnav ulpadding-top:15px !important

【问题讨论】：

减少悬停时的填充，它应该停止移动

你不想让它像现在这样希望吗？

@ZeroPhase 不，我不希望它移动，当我添加上面的行时它开始移动

【参考方案1】：

给它分配一个margin

这样的事情应该可以工作。

#nav a:hover
border-top:solid 4px #3b5998; 
color:#b7c3e6;
margin-top: 10px; 
padding: 6px

如果需要，您甚至可以使用否定的margins。

您可能希望删除padding 并将其替换为padding-left 或padding-right，这样您就不会移动链接的顶部和底部。

【讨论】：

我试过这个，它移动得更多。我尝试了负边距，它把它移到了另一个方向。

尝试使用页面的position 属性。你有很多标记，所以如果你可以将负责控制nav 的所有部分分解成一个 jsfiddle.net，它将有助于调试。

在我的问题中添加了我的 NAV CSS 的其余部分。它是来自 squarespace 的模板网站，所以我认为我在上面添加的内容是导致它的原因。我不知道如何构建 jfiddle 的东西。

border 和 padding 增加了厚度并导致导航向下/向上跳跃。您可以做的是对线条的图像进行 Photoshop 处理，并使用 background-image:url(filepath); background-position: 0px 105px; 访问文件您可能还需要根据分配的顺序使用 z-indexes 渲染设置 z-index 元素。较低的数字迫使元素进入背景，较高的数字迫使它们前进。