用于在悬停时显示图像的文本链接答案

【问题标题】：Text link to show an image on hover用于在悬停时显示图像的文本链接
【发布时间】：2011-08-21 00:47:36
【问题描述】：

我试图在悬停时获取链接以在链接左侧显示图像。我几乎实现了我想要的，但我遇到了 html 问题。

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

有没有办法解决这个问题或实现这个目标的更好方法？ Question中的链接是yaya Photography

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; 

}

这是我正在努力工作的 html

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

提前致谢！

【问题讨论】：

标签： html image hover rollover

【解决方案1】：

您的问题是span 上的样式也影响了class="redtext" 跨度。

解决此问题的简单方法：您可以去掉 img 周围的 span，然后将 CSS 中对 span 的引用更改为引用 img。

【讨论】：