html/css：鼠标悬停时通过链接增加字体大小的位置移动

Posted 2023-05-08

技术标签:

【中文标题】html/css：鼠标悬停时通过链接增加字体大小的位置移动【英文标题】：html/css: Position shifting with link that increase font size when hovering mouse 【发布时间】：2012-09-14 12:49:51 【问题描述】：

我想在我的网页中创建一个html/css 菜单，其中包含四个链接（水平位于页面顶部中心）。

并且我希望将鼠标悬停在 (a:hover) 上时增加菜单链接字体大小。

但我遇到的问题是当字体大小增加时（在IE 8 和Chrome 中）菜单项会改变它的位置（稍微向下）我不希望这种情况发生，请注意我使用的是背景图片 (152 * 52) 作为链接

我尝试使用table 而不是inline-block，但结果更加混乱。

我也尝试过使用margin 和padding，但也没有用。

我是 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>

【问题讨论】：

【参考方案1】：

尝试将固定的line-height 添加到您的菜单链接（例如，line-height:26px;）。

这样，当你增加字体大小时，文本行的高度不会改变。 line-height的默认值是normal，这意味着你的菜单每一行的高度会随着字体大小而调整。

更多信息：http://www.w3.org/wiki/CSS/Properties/line-height

【讨论】：

感谢您的快速响应，您的解决方案似乎可以解决我的问题，但我无法正确解决。我在line-height、padding 和margin 上测试了一些值，但它们对我不起作用。我会测试更多的可能性.. 继续尝试不同的行高值，直到感觉合适为止。它应该可以解决问题。如果没有，那么我可能误解了问题所在..！那么，您是否设法使用line-height 解决了您的问题？如果是这样，请不要忘记投票并接受此答案（对于将搜索类似问题解决方案的未来用户）！如果没有，找到后在此发布解决方案！【参考方案2】：

你可以编辑你的css类来解决问题，这里是更新的类：

.menuLink:hover

    color:#CC7011;
    background-image:url(img/bto.png);
    font-size: 26px;
    padding:0px 10px 10px 10px;

希望它能解决你的问题

【讨论】：

对不起，我之前试过这个，它弄乱了链接的背景图片我已经在 ubuntu 上的 chrome 和 firefox 以及 windows7 上的 chrome、firefox 和 IE 上对其进行了测试，并且在这里可以正常工作【参考方案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;

【讨论】：

【参考方案4】：

我在Chrome、IE 和Firefox 在win7 上找到了一个完美的简单解决方案。

我在链接 (<a>) 中放置了一个表格，其中的一个单元格具有与 <a> 相同的 width 和 height（这是图像尺寸）。

还做了表：text-align:center。 text-align:center 确保表格内的文本水平居中。并且表格的优点是即使在鼠标悬停时字体大小发生变化，文本也会垂直居中。该表格还防止了链接图像和其他链接在字体大小增加时移动。

我删除了所有padding。因为如果我将 (height,width) 与 (padding) 结合起来，它会在不同的浏览器上产生不同的结果（尤其是 IE 和 Chrome）。

将内容放入<a> 可能是一个错误的想法，但它确实适用于大多数浏览器。

我还将这行代码作为我的 html 文件的第一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这使得<table> 继承了链接<a> 中的所有内容，我不知道为什么，但它确实简化了一些事情。

所以生成的代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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:152px;
    height: 52px;
    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;


table.ml

    text-align: center;
    width:152px;
    height: 52px;

</style>
</head>

<body>
<div class="menu">
    <a class="menuLink" href="index.html"><table class="ml"><tr><td>Home</td></tr></table></a>
    <a class="menuLink" href="page1.html"><table class="ml"><tr><td>Page1</td></tr></table></a>
    <a class="menuLink" href="page2.html"><table class="ml"><tr><td>Page2</td></tr></table></a>
    <a class="menuLink" href="page3.html"><table class="ml"><tr><td>Page3</td></tr></table></a>
</div>

</body>
</html>

谢谢大家。

【讨论】：

【参考方案5】：

前段时间我也遇到过同样的问题。我已经创建了一个 FIDLE，并对“.menuLink”进行了评论更改。

.menuLink, .menuLink:visited 
    color:#FFFFFF;
    background-image:url(img/btk.png);
    text-decoration:none;
    font-size: 20px;
    width:132px;
    /* height: 32px; */ /* removed */
    padding: 0 10px; /* changed here */
    line-height: 52px; /* added code */
    display:inline-block;
    vertical-align: middle; /* Added code */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;

    /* In case you have longer 2 words text */
    white-space: nowrap;
    overflow: hidden; /* to hide overflowed text */

希望这对其他人有所帮助，或者如果我的解决方案不好，您可以修改您的代码

【讨论】：

以上是关于html/css：鼠标悬停时通过链接增加字体大小的位置移动的主要内容，如果未能解决你的问题，请参考以下文章

HTML/CSS - 将鼠标悬停在照片上时显示链接

为啥当鼠标悬停后出现边框时 <div> 的大小会增加？ CSS [重复]

html css hover 如何实现鼠标经过锚文本（不可点击字体）出现下划线？

放大鼠标悬停效果

Fabric js：使用鼠标调整大小时增加字体大小而不是仅仅缩放

IE8 字体大小在 :hover 上切换 - 仅限日语语言