html - css3动画推另一个里

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

通过更改 :hover 上的字体大小，您正在更改元素的尺寸，这是我期望浏览器的行为。除非您使用 position: absolute 而不是 relative，否则我认为解决此问题的唯一方法是使用 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，但希望它能让您有所作为。