导航悬停项目而不移动

Posted 2023-03-06

【中文标题】导航悬停项目而不移动

【英文标题】：Navigation hover items without moving

【发布时间】：2014-07-26 12:41:31

【问题描述】：

我做了这个导航：

http://jsfiddle.net/48jd6/

菜单项如下所示：

<li><a href="index.html" title="home" class="navTx">home</a></li>

当您将鼠标悬停在“家”、“关于”、“作品”或“联系人”上时，会出现绿色边框。但是，在悬停时，所有其他菜单项都会移动，因为悬停的文本变大了。

我完全不知道如何阻止它们移动。有没有办法做到这一点？

【参考方案1】：

你可以试试下面的代码：

Working Demo

.navTx 
height: 18px;
margin-top: -130px;
display: inline-block;
border:solid 2px transparent;
padding: 12px 20px;

【讨论】：

这就是我所做的，唯一的区别是我通常将边框颜色设置为transparent，这样它就可以在任何背景上工作。

对齐被破坏了.. :v

在更改导航的宽度时对齐再次起作用。 :)

@john: 是的，你可以将边框颜色设置为透明..:)