使用CSS悬停图片 [英] Hover image using css
本文介绍了使用CSS悬停图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试为博客上的阅读更多按钮创建一个悬停图片。我正在尝试引用:
I'm trying to create a hover image for my 'read more' button on blogger. I'm trying to reference:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><img src='http://3.bp.blogspot.com/-JpvWYCR8FXA/Vp1oL9cD7BI/AAAAAAAAAe4/1PRPh1ASGG8/s1600/extendedreadmore.png'/></a>
</div>
</b:if>
与此CSS:
.jump-link:hover {
background: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg');
}
但它没有出现。我尝试了几种变体,但似乎找不到找到解决方案的类似主题。
but it's not appearing. I've tried several variations and can't seem to find any similar topics that find a solution.
推荐答案
您可以尝试以下方式-
.jump-link:hover {
background: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg') no-repeat ;
}
.jump-link:hover img{opacity:0;}
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><img src='http://3.bp.blogspot.com/-JpvWYCR8FXA/Vp1oL9cD7BI/AAAAAAAAAe4/1PRPh1ASGG8/s1600/extendedreadmore.png'/></a>
</div>
</b:if>
我希望我能帮上忙你。
这篇关于使用CSS悬停图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文