Question

行，

所以我有一个＆＃34; 3d＆＃34; css中的按钮：悬停转换。

这里是html

<nav>
<ul class="hmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
</nav>

这就是css

ul.hmenu {
margin-top: 9%;
z-index: 50;
width: 75%;
list-style: none;
}

ul.hmenu li {
float: left;
margin-left: 5%;
}

ul.hmenu li a:before {
content: "\2022\00a0";
color: #f00;
transition: color 1s ease;
}

ul.hmenu li a {
background: #333;
color: #fff;
display: block;
font: normal 100 1.5em Helvetica, sans;
padding: .5em;
box-shadow: 5px 5px 0 0 #f00;
transition: background-color 1s ease;
text-decoration: none;    
}

ul.hmenu li a:hover, ul.hmenu li a:active {
background-color: #f00;
box-shadow: none;
transform: translate(5px, 5px);
}

ul.hmenu li a:hover:before, ul.hmenu li a:active:before {
color: #fff;
content: "\203A\00a0";  
}

这里是JSFIDDLE：http://jsfiddle.net/etb6F/

我的问题是，如何在开启时如何防止按钮略微向左移动：悬停？我希望他们能够保持自己的地位，只需按下＆＃34;按下＆＃34;但不要向左移动。

Answer 1

通过变换，您还必须保持li固定的宽度和高度，以便其他按钮不受影响。

DEMO：http://jsfiddle.net/etb6F/3/

确切小提琴：http://jsfiddle.net/etb6F/4/

Answer 2

在第30行：在ul.hmenu li a:hover, ul.hmenu li a:active {}部分中，删除第一个5px实例。你应该用这个：

ul.hmenu li a:hover, ul.hmenu li a:active {
    background-color: #f00;
    box-shadow: none;
    transform: translate(0, 5px);
}

translate(X,Y)中的第一个数字沿X轴移动，第二个数字（Y）沿Y轴移动。

Answer 3

替换：transform: translate(5px, 5px); 用：margin:5px -5px -5px 5px;

鼠标悬停/悬停时css3边距缩小

3 个答案: