html - css3动画推另一个li

Question

我在一个网站上工作，我发现一个 css3 动画有点问题.. 看看当我悬停“主页”按钮时它会推动“关于我们”链接.. 我如何防止这种情况发生？这是它的代码：

<div class="menu"> <ul> <li id="one"><a href="">Home</a></li> <li id="two"><a href="">About us</a></li> </ul> </div>

.menu ul{
margin: 0;
padding: 0;}

.menu li{
font-family: Helvetica, Arial sans-serif;
margin: 20px 10px;
display: inline-block;
*display: inline;}

.menu a{
position: relative;
color: #999;
text-decoration: none;
padding: 20px;
background-color: #DDD;
-moz-border-radius: 0 0 20px 20px;
-webkit-border-radius: 0 0 20px 20px;
-border-radius: 0 0 20px 20px;
-webkit-box-shadow: inset 10px -3px 10px #ccc;}

.menu a:hover{
background-color: #eee;
font-size: 150%;
-webkit-box-shadow: 0 0 0 #eee;
text-shadow: 0 0 10px #fff;
-webkit-transition: 0.5s ease;}

http://jsfiddle.net/nsdbV/

谢谢 :D

Answer 1

通过更改 font-size on :hover，您正在更改元素的尺寸，这是我期望浏览器的行为。除非您使用position: absolute而不是相对，否则我认为解决此问题的唯一方法是使用 transform 属性。我在这里稍微修改了你的例子：http: //jsfiddle.net/nsdbV/2/

.menu a{
    display: inline-block;
    -webkit-transition: -webkit-transform 0.5s ease;
}
.menu a:hover{
    -webkit-transform: scale(1.5);
}​

这不仅仅是扩展文本，而是将整个框缩放 150%。我只展示了我在上面所做的更改，但是 jsfiddle 链接应该让您很好地了解如何使用它。你需要稍微调整一下 CSS，但希望它能给你一些东西。