HTML/CSS：鼠标悬停时使用增加字体大小链接移动位置
我想在我的网页中创建一个HTML/CSS菜单，该菜单包含四个链接（水平地位于页面的顶部中心）。
并且我希望当鼠标悬停在上面(a:hover)时，菜单链接的字体大小增加。
但我遇到的问题是，当字体大小增大时（在IE 8和Chrome)菜单项会改变它的位置（下了一点），我不希望发生这种情况，请注意，我使用的是背景图像(152*52)作为链接
我尝试使用表而不是内联块，但它造成了更大的混乱。
我还试着玩了边距和填充，但也不起作用。
我是HTML/CSS的新手，所以任何关于HTML/CSS的建议都将非常感谢，并原谅我糟糕的英语。
下面是我的代码：
<html>
<head>
<title>Home page</title>
<style type="text/css">
body {
font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;
font-size: 13px;
color: #000060;
background-color: #005070;
background-repeat:repeat-x;
text-align:center;
}
.menu
{
height:64px;
width:100%;
background-image:url(img/bglb2.png);
background-repeat:repeat-x;
text-align:center;
}
.menuLink, .menuLink:visited
{
color:#FFFFFF;
background-image:url(img/btk.png);
text-decoration:none;
font-size: 20px;
width:132px;
height: 32px;
padding: 10px;
display:inline-block;
margin-left: 10px;
margin-right: 10px;
margin-top: 6px;
}
.menuLink:hover
{
color:#CC7011;
background-image:url(img/bto.png);
font-size: 26px;
}
</style>
</head>
<body>
<div class="menu">
<a class="menuLink" href="index.html">Home</a>
<a class="menuLink" href="page1.html">Page1</a>
<a class="menuLink" href="page2.html">Page2</a>
<a class="menuLink" href="page3.html">Page3</a>
</div>
</body>
</html>
共有3个答案
将HTML代码更改为
<div class="menu">
<ul>
<li><a class="menuLink" href="index.html">Home</a></li>
<li> <a class="menuLink" href="page1.html">Page1</a></li>
<li><a class="menuLink" href="page2.html">Page2</a></li>
<li><a class="menuLink" href="page3.html">Page3</a></li>
</ul>
</div>
添加此样式
ul,li{
display:inline-block;
list-style:none;
line-height:60px;
vertical-align:bottom;
}
你可以编辑你的css类来解决这个问题，这里是更新的类：
.menuLink:hover
{
color:#CC7011;
background-image:url(img/bto.png);
font-size: 26px;
padding:0px 10px 10px 10px;
}
希望它能解决你的问题
尝试向菜单链接中添加固定的line-height（例如，line-height:26px；)。
这样，当增加字体大小时，文本行的高度不会改变。line-height的默认值为normal，这意味着菜单中每一行的高度将随字体大小而调整。
更多信息:http://www.w3.org/wiki/css/properties/line-height
-
问题内容： 有时，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况，其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript比CSS慢吗？ 问题答案： ：hover的问题是IE6仅在链
-
问题内容： 当有人将鼠标悬停在元素上时，我想显示一个div ，但是我想在CSS中而不是在JavaScript中执行此操作。您知道如何实现吗？ 问题答案： 您可以执行以下操作： 这使用相邻的兄弟选择器，是the下拉菜的基础。 HTML5允许锚元素包装几乎所有内容，因此在这种情况下，该元素可以成为锚的子元素。否则原理是相同的-使用伪类更改另一个元素的属性。
-
我正在处理fabric js应用程序&当我们用鼠标调整字体大小时，我需要增加/减少字体大小 我试过的代码 null null 但这只是缩放文本，而不是增加/减少字体大小，但我必须调整字体大小，就像这样
-
我有HTML页面，其中我正在使用javascript语法更改字体大小 当我尝试更改字体大小时，HTML会根据字体的增加/减少上下移动文本，用户无法保持更改字体大小之前的相同文本。 我怎样才能让用户留在原来的地方？
-
问题内容： 我有一个链接图像。当用户将鼠标悬停在链接上时，我想显示不同的图像。 目前，我正在使用以下代码： 但是我遇到了很多问题：div没有选择CSS规则（当我在Firebug中查看元素时，该元素只是没有显示相关的CSS规则）。 也许这是因为（据我所知）这是无效的HTML：您不能在周围加上。但是，如果切换到该位置，似乎会遇到更大的问题，因为您不能可靠地在span上设置高度和宽度。 帮帮我！我该如何
-
问题内容： libgdx中是否有任何侦听器可以让我检测到鼠标悬停而不是鼠标悬停。在场景2D的按钮类中，您有2种方法isOver和isPressed，但是它们执行相同的操作…还有其他问题吗？还有另一种方法来检测鼠标悬停在actor上吗？ 问题答案： 还有的可以连接到和它提供的事件，如下面的： 该事件从根本上来说意味着鼠标开始悬停在角色上，意味着它“离开”了角色的区域。它还有一个事件，您可以使用该事件