받기 : 하나 이상의 클래스/ID를 조정하려면 마우스를 올려주세요.

Question

무언가를 얻는 데 어려움을 겪었고 이미 여러 곳을 보았습니다. 도움이 크게 감사했습니다.

기본적으로 몇 가지 롤오버 이미지 (정상 상태 '왼쪽 상단', 마우스 오버 상태 '왼쪽 하단', 그들은 현재 CSS를 통해 개별적으로 롤오버하도록 구성되어 있음 -이 모양은 다음과 같습니다. . :

<ul id="menu"> 
<li><a href="#" class="home">Home</a></li> 
<li><a href="#" class="archives">Archives</a></li> 
<li><a href="#" class="contact">Contact</a></li> 
<li><a href="#" class="about">About</a></li> 
</ul> 

#menu { 
list-style: none; 
padding: 0; 
margin: 0 auto; 
height: 24.6em; 
width: 79em; 
position: relative; 
} 

#menu a { 
display: block; 
text-indent: -900%; 
position: absolute; 
outline: none; 
} 


#menu a:hover { 
background-position: left bottom;} 


#menu .home { 
width: 520px; 
height: 124px; 
background: url(images/Home Menu.png) no-repeat; 
left: 0px; 
top: 122px; 
} 

#menu .archives { 
width: 263px; 
height: 57px; 
background: url(images/Archives Menu.png) no-repeat; 
left: 0px; 
top: 189px; 
} 

and so on for the rest of the links. 

지금 내가 달성하기 위해 노력하고있어, 그래서 나는 그들 중 하나를 가져 가면 모두가 이월이 나는 "아카이브"마우스가 가리키는 말이며, "이상 아카이브를 롤 것이다 다음, 연락처 , about "

나는 이미 다음을 시도해 보았지만 작동하지 않았다. (불투명도 절은 내가 원했던 것과 정확히 같았지만, 어떤 이유로 "배경 위치"에서 작동하지 않는 것 같습니다.) :

#menu:hover .archives {background-position: left bottom; opacity: 0.5} 
#menu:hover .contact {background-position: left bottom; opacity: 0.5} 
#menu:hover .about {background-position: left bottom; opacity: 0.5} 

어떻게해야합니까? 어떤 도움을 주셔서 미리 감사드립니다!

Answer 1

ohnno,

당신이 바로 그 궤도에 있었다, 그러나 그것은 특이 요구 사항으로 인해 작동하지 않습니다. 이 경로를가는보십시오 :

#menu:hover a { background-position: left bottom; opacity:0.5; } 

여전히 작동하지 않는 경우는,보십시오!

#menu:hover li a { background-position: left bottom; opacity:0.5; } 

마지막으로, 당신은 또한 규칙을 적용 할 규칙에 중요한을 적용 할 수 있습니다. !

#menu:hover li a { background-position: left bottom !important; opacity:0.5; } 

이 특이성에 대한 자세한 내용은 W3C에서 this article 체크 아웃 : 중요 "이것은 당신이 생각하는 무엇이든간에 우선"브라우저에 지시 CSS를위한 특별한 플래그 (좀)라도 좋습니다는 예입니다. 요컨대, 특이성은 어떤 스타일이 어떤 시간에 사용되는지를 정의합니다. 적용 요소 스타일 (Applied Element Style)은 규칙에 따라 적용될 수있는 각 스타일에 대해 가장 높은 특이성을 갖는 스타일에 의해 규칙에 따라 정의됩니다.

FuzzicalLogic

Answer 2

left-bottom은 변경 사항을인지하지 못하도록 충분히 변경되지 않을 수 있습니다. 그래?