文本链接在悬停上显示图像

Question

我想要在链接左侧显示图像时进行链接。我几乎达到了我想要的减去我有一个HTML问题。

试图让我的redtext类显示在具有翻转效果的链接上的反斜杠上。

有没有解决这个或更好的方法来实现这一目标？有问题的链接是亚亚摄影

的CSS

.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！

Answer 1

您的问题是，span上的样式也会影响class="redtext"范围。

一个简单的方法来解决这个问题：你可以摆脱span你img四周，然后改变你的CSS span引用来引用img代替。