所以,我做了这个。
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
not every button is the same size.
另一方面,如果我使用 width: 120%
,我相信页面会占用整个 #navholder
元素的宽度,该元素由类 定义.bgd
.
关于如何实现这一点有什么想法吗?
谢谢。
最佳答案
你可以使用 transform: scale()
#nav a:hover {
transform:scale(1.3,1.3);
-webkit-transform:scale(1.3,1.3);
-moz-transform:scale(1.3,1.3);
}
关于html - 在悬停时将按钮的宽度增加几个百分点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20504346/