Question

我遇到了问题，我不知道是什么原因造成的。我做了一个简单的布局，包括两个按钮，我希望它们在我将光标悬停在它们上面时改变它们的外观。问题是我在codepen测试它并且它可以工作，但是当我在aptana中使用它（我在那里编写代码），并尝试查看结果时，第二个按钮根本不会改变它的状态在悬停时，即使两个按钮具有几乎相同的属性。如果我删除保证金：0 auto;它也适用于aptana，但它会修改按钮位置，我不希望这样。

<div id="slides">
<div id="button">PORTFOLIO</div>
<div id="button_second">SERVICES</div>
</div>

#slides{
width:1366px;
height:300px;
position:relative;
}
#button{
width:150px;
height:35px;
background:#f88560;
color:#ffebc9;
border-radius:7px;
margin:0 auto;
line-height:35px;
text-align: center;
position:absolute;
top:130px;
left:0;
right:0;
font-family:'Source Sans Pro', sans-serif;
font-size:18px;
}
#button:hover{
background:#faa387;
color:#FFFFFF;
cursor:pointer; 
}
#button_second{
width:85px;
height:25px;
background:#3899db;
color:#FFFFFF;
border-radius:7px;
margin:0 auto;
line-height:25px;
text-align: center;
position:absolute;
top:287px;
left:0;
right:0;
font-family:'Source Sans Pro', sans-serif;
font-size:14px;
}
#button_second:hover{
background:#faa387;
color:#FFFFFF;
cursor:pointer; 
}

Answer 1

尝试在css中使用类来帮助将常用代码保存在一起。如果您的按钮都使用相同的字体，那么您可以将该字体放在一个类上，或者如果它们的宽度相同，则坚持使用。

此外，尽量使用定位作为最后的手段。如果您只是添加间距，请使用margins或padding来完成您需要的样子。定位经常会给你带来更多问题。

这是一个代码示例的小提琴。 http://jsfiddle.net/3F4cS/

当与自动边距一起使用时，胡佛变为非活动状态

1 个答案: