마우스 오버시 이미지가 나타나지 않는 링크

Question

롤오버 이미지가 있고 사용자가 이미지 위로 마우스를 가져 가면 이미지가 어두워지고 (롤오버 이미지를 사용하여 얻은 것) 두 개의 링크가 "자세히 알아보기"라는 제목으로 나타납니다. 및 "방문 사이트"(이미지 위에 표시되어야 함). 스타일링을 시작하기 전에 모든 것이 제대로 작동하는지 확인하고 싶었습니다. 문제는 링크가 전혀 나타나지 않는 것입니다. 이미지를 마우스로 올렸을 때 링크를 볼 수 있도록 수정해야하는 부분은 무엇입니까?

문제가있는 웹 사이트는 here이며 이미지 위에 마우스를 올려 놓으면 링크가 나타나지 않는지 확인할 수 있습니다. 내 코드는 아래와 같습니다.

HTML

<div id="example1" class="good_example"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ABC','','images/examples/abc_website_over.png',1)"><img src="images/examples/abc_website_desat.png" alt="visit site" width="300" height="200" id="ABC"></a> 
<div class="options"> 
<a href="http://www.example.com">Learn More</a><a href="#good_examples" id="click-me1">Visit Site</a> 
</div></div> 

CSS

#example1:hover.options { 
visibility:visible; 
} 

.options { 
visibility:hidden; 
position:absolute; 
z-index:9999999; 
top:50px; 
left:75px; 
} 

.options a:link { 
padding-right:15px; 
padding-left:15px; 
padding-top:10px; 
padding-bottom:10px; 
margin:10px; 
color:#ffffff; 
font-size:40px; 

border-radius:10px; 

-webkit-border-radius:10px; 

-moz-border-radius:10px; 
width:50px; 
text-align:center; 
opacity:0.7; 
background-color:#069; 
} 

.options a:hover { 
opacity:1; 
} 

Answer 1

이 같은 셀렉터를 교체하여 css 선택

#example1:hover.options { 
visibility:visible; 
} 

에 문제가있다 :

#example1:hover > .options { 
    visibility:visible; 
} 

및 그 작동합니다.

here's a quick sample

Answer 2

당신의 .options이 {가시성 : 숨겨진를;} 그래서 거기에 상관없이 콘텐츠를 보이지 않는다. .options : hover 일 때 적어도 보이는 것으로 변경해야합니다.