자동 여백과 함께 사용하면 호버가 비활성 상태가됩니다.

Question

문제가 있으며 그 원인을 알 수 없습니다. 나는 두 개의 버튼을 포함하는 간단한 레이아웃을 만들었고 커서를 가리킬 때마다 모양을 바꾸기를 원했습니다. 문제는 내가 codepen에서 테스트했는데 작동하지만 aptana에서 코드를 썼는데 결과를 보려고하면 두 번째 버튼은 마우스를 올리면 상태가 변경되지 않습니다. 두 버튼이 거의 동일한 속성을 갖는 경우 여백을 삭제하면 : 0 자동; 그것은 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/