悬停时显示图像的文本链接
我试图在悬停时获取链接以在链接左侧显示图像。我几乎已经实现了我想要的，但我遇到了 html 问题。
尝试让我的红色文本类显示在具有翻转效果的链接的反斜杠上。
有没有办法解决这个问题或者更好的方法来实现这个目标？问题中的链接是 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>
提前致谢！
I am trying to get a link when hovered to show an image just to the left of the link. I have achieved almost what I want minus I am having an html issue.
Trying to get my redtext class to show up on the backslash on the link that has the rollover effect.
Is there a way around this or better way of achieving this? The link in Question is yaya Photography
The 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;
}
And here is the html I am struggling to get to work
<a class="thumbnail" href="#accordion"><h3><span class="redtext">/</span> yaya Photography</h3><span><img src="images/yaya/yayathumb.png" /></span></a>
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的问题是
span上的样式也会影响class="redtext"范围。解决此问题的一个简单方法是：您可以去掉
img周围的span，然后将 CSS 中对span的引用更改为改为参考img。Your problem is that your styles on
spanare affecting theclass="redtext"span also.A simple way to fix this: you can get rid of the
spanaround yourimg, and then change the references tospanin your CSS to referenceimginstead.