悬停时将按钮的宽度增加百分之几答案

【问题标题】：Increasing the width of button by a few percent on hover悬停时将按钮的宽度增加百分之几
【发布时间】：2013-12-28 13:16:12
【问题描述】：

所以，我做了这个。

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 元素的宽度。

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

谢谢。

【问题讨论】：

标签： html css button hover

【解决方案1】：

您可以使用 em 设置宽度并增加字体大小。

此外，您可以在悬停时添加边框/填充：

#nav a:hover {
    border-right: solid 20px black;
    /* or padding-right */
}

【讨论】：

【解决方案2】：

你可以使用transform: scale()

jsFiddle example

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

【讨论】：

+1！这绝对是这个特定问题的最干净的解决方案，因为它独立于大小调整方法和元素上下文。
这就像一个魅力。非常感谢您对 JoshC 的帮助。也感谢其他回答的人。
仅供参考，浏览器支持仅限于 IE9+ 并且需要 -ms-transform 属性。 caniuse.com/transforms2d

【解决方案3】：

只需增加悬停时的填充：

#nav a:hover {
   color: white;
   background: black;
   padding: 5px 10px; /* 5px top/bottom, 10px left/right */
}

【讨论】：

是的，虽然scale() 转换可以使用所有四个边上的填充、带有负的top 和left 偏移量的position: relative; 和font-size: 1.3em; 来更准确地复制，但现在大多数浏览器都支持 CSS3 转换。