호버에서 이미지를 표시하기위한 텍스트 링크

Question

링크의 왼쪽에 이미지를 표시하기 위해 마우스를 올려 놓았을 때 링크를 잡으려고합니다. 나는 내가 원하는 것을 거의 얻지 못했다. 나는 html 문제가있다.

내 빨간 텍스트 클래스가 롤오버 효과가있는 링크의 백 슬래시에 표시되도록하려고합니다.

이 문제를 해결하는 방법이 있습니까? 질문의 링크는 야야 사진

여기

.thumbnail{ 
position: relative; 
z-index: 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
z-index: 50; 
} 

.thumbnail span{ 
position: absolute; 

left: -1000px; 
visibility: hidden; 
color: black; 
text-decoration: none; 
} 

.thumbnail span img{ 
border-width: 0; 
padding: 0px; 
} 

.thumbnail:hover span 
visibility: visible; 
top: -25px; 
left: -125px; 

} 

내가 미리

<a class="thumbnail" href="#accordion"><h3><span class="redtext">/</span> yaya Photography</h3><span><img src="images/yaya/yayathumb.png" /></span></a> 

감사를 작동하도록하기 위해 고군분투하고있는 HTML 인 CSS입니다!

Answer 1

span의 스타일이 class="redtext" 스팬에도 영향을 미치고 있습니다.

이 문제를 해결하는 간단한 방법 : 당신이 당신의 img 주위 span 제거 할 수 다음 대신 img을 참조하기 위해 CSS에 span에 대한 참조를 변경합니다.