1. 首页
  2. 问题列表
  3. HTML/CSS：鼠标悬停时使用增加字体大小链接移动位置
提问者：小点点

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个答案

匿名用户

尝试向菜单链接中添加固定的line-height（例如，line-height:26px；)。

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

更多信息:http://www.w3.org/wiki/css/properties/line-height

匿名用户

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

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

希望它能解决你的问题

匿名用户

将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;
 }

相关问题