在悬停时将按钮的宽度增加几个百分点

Question

所以,我有这个.

HTML

<div id="navholder" class="bgd">
<nav id="nav">
    <ul>
        <li><a href="">???????</a></li>
        <li><a href="">?????????</a></li>
        <li><a href="">?????????</a></li>
        <li><a href="">??????</a></li>
        <li><a href="">????????</a></li>
        <li><a href="">???????</a></li>
    </ul>
</nav>
</div>

#navholder {
height: 60px;
text-align: center;
margin: 0 auto;
    }

#nav {
height: 30px;
margin-top: 10px;
background: #B8860B;
    }

#nav ul li{
margin-top: 3px;
display: inline;
font-size: 120%;
opacity: 1.0;
    }

#nav ul li a {
display: inline-block;
height: 120%;
padding: 5px;
-webkit-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    -1px 0px 22px rgba(50, 50, 50, 0.5);
box-shadow:         -1px 0px 22px rgba(50, 50, 50, 0.5);
border: 1px solid white;    
opacity: 1.0;
background: #DAA520;

    }

#nav a:hover {
color: white;
background: black;
width: ?
    }

我希望按钮一旦用鼠标悬停,增加约20%.我发现的问题是,如果我使用像"width:60px"这样的确切宽度,并不是每个按钮的大小都相同.

另一方面,如果我使用"width:120%",我相信页面采用由.bgd类定义的整个#navholder元素的宽度.

关于如何实现这一目标的任何想法？

谢谢.

Answer 1

你可以用 transform: scale()

jsFiddle例子

#nav a:hover {
    transform:scale(1.3,1.3);
    -webkit-transform:scale(1.3,1.3);
    -moz-transform:scale(1.3,1.3);
}