html과 css에서 버튼을 만들 수 없습니다.

Question

버튼을 만드는 일반적인 방법으로 시작합니다. 그 후

<div id="button"> 
<a href="#"><img src="button.png"></a> 
</div> 

때마다 누군가가 이미지를 변경해야합니다 버튼 위에 마우스를 가져 가면하지만, relavant CSS를 여기 뭐가 문제

#button a:hover 
{ 
    background-image: url('button2.png'); 
} 

하지 않습니다? 마우스를 가리키면 버튼의 이미지가 변경되지 않는 이유는 무엇입니까?

Answer 1

이렇게하려면 배경 이미지를 먼저 설정해야합니다. 제작중인 버튼에는 실제 image 태그가 포함되어 있으며 배경 이미지는 포함되어 있지 않습니다. 주위

그래서 가능한 일이 같은 버튼에 대한 배경 이미지로 button.png 설정 : 호버 상태에 대한 다음

#button a 
{ 
    background-image: url('button.png'); 
    height: 20px; /* set to actual height of button image */ 
    width: 200px; /* set to actual width of button image */ 
} 

하고 수행하는 것을 잊지 마세요

#button a:hover 
{ 
    background-image: url('button2.png'); 
} 

#button a의 높이와 너비를 설정하십시오 (이미지의 크기로 설정하십시오). 그렇지 않으면 표시되지 않습니다.

Answer 2

당신은 당신의 코드를 변경했습니다 : CSS에서,

<div id="button"> 
<a href="#">&nbsp;</a> 
</div> 

그리고 : SEO 목적으로

#button 
{ 
    width: /* image width goes here */px; 
    height: /* image heightgoes here */px; 
} 
#button a 
{ 
    display:block; 
    background-image: url('button.png'); 
    text-decoration:none; 
} 
#button a:hover 
{ 
    background-image: url('button2.png'); 
} 

---

, 당신은 또한 <a> 내부의 텍스트를 쓸 수 있습니다처럼 :

<div id="button"> 
<a href="#">Title of the link</a> 
</div> 

#button 
{ 
    overflow:hidden; 
    text-indent:-999px; 
    width: /* image width goes here */px; 
    height: /* image heightgoes here */px; 
} 

또는 이러한 방법 : 때부터

#button 
{ 
    overflow:hidden; 
    width: /* image width goes here */px; 
    height: /* image heightgoes here */px; 
} 
#button a 
{ 
    ...other rules 
    padding-left:/* a value higher than #button width */px; 
}