HTML, DIV, CSS -

Question

#logo 
{ 
    position: relative; 
    width: 100px; 
    height: 18px; 
    float: right; 

    background-image: url('../images/logo_def.png'); 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 

#logo a:hover 
{ 
    background-image: url(../images/logo_h.png); 
} 

그것은 작동하지만 마우스가 위에있을 때 BG 이미지가 변경되지 않는 변경 가져가 동작과 배경 이미지, 왜?

Answer 1

을 음, 즉각적인 문제는 #logo 내부에 <a> 요소가 없습니다 것입니다. 올바른 요소를 대상으로 두 번째 규칙을 변경하면이 문제를 "해결"합니다

#footer a:hover 
{ 
    background-image: url(../images/logo_h.png); 
} 

편집 :
으로는 의견에서 지적되었다

첫 번째 규칙의 스타일해야 A 요소에 이 적용되고 # 012o DIV는 아무런 목적이 없기 때문에 을 제공하므로 제거해야합니다.

이것은 혼란을 줄이고 향후 두통을 예방하는 데 도움이되므로 문제 해결에 도움이됩니다. (설명을 위해 @Julian에게 덕분에)

Answer 2

배경 이미지는 원래 #logo에 할당되어 있습니다. a : hover에서 ANCHOR의 배경 이미지가 변경됩니다. 따라서 일하는 것이 다음

#logo a 
{ 
    position: relative; 
    width: 100px; 
    height: 18px; 
    float: right; 

    background-image: url('../images/logo_def.png'); 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 

#logo a:hover 
{ 
    background-image: url(../images/logo_h.png); 
} 

Answer 3

<a> 요소에 호버 이미지를 적용했습니다. 내부에 <a> 요소가 없으므로 div#logo입니다.

Answer 4

당신은 앵커 요소를 다음 사용하도록 사업부의 스타일을 할 수 a:hover :

<div id="blah"> 
<p> <a href="#"></a></p> 
</div> 

그런 다음 CSS

#blah a:hover { 
background-image: url(myImage.jpg); 
} 

Answer 5

당신이 내부 블록 레벨 요소를 넣어하지 않도록주의해야한다

앵커는 블록을 표시하도록 설정할 수있는 인라인 요소입니다. 올바른 계층 구조는 해당 CSS가있는 div#footer > a > span#logo과 같아야합니다.

Answer 6

onMouseOver 및 onMouseOut javascript 함수를 사용하는 것이 더 간단하지 않습니까?

<script type="text/javascript"> 
function divcolor(){ document.getElementById('div1').style.background='#FFDFA3'; } 
function divcolor2(){ document.getElementById('div1').style.background='#FFFFFF'; } 
</script> 

<div id="div1" onmouseover="divcolor();" onmouseout="divcolor2();">Hover ME and I will highlight for you :)</div> 

나는 배경색을 사용했지만 이미지는 동일해야합니다.