[英]Image hover - Change effects
I'd actually want to change an image when someone hovers the mouse over the image. 当有人将鼠标悬停在图像上时,我实际上想要更改图像。
Lets say I have an image: 让我们说我有一个图像:
<img src="image.png"/>
I want to change it with the following effects on hover: 我想在悬停时使用以下效果更改它:
How is it possible to do it? 怎么可能这样做?
I suggest that you create a link <a class="my-image">foo</a>
and use css to get the rollover effect. 我建议您创建一个
<a class="my-image">foo</a>
链接并使用css来获取翻转效果。 CSS rollover tutorials are easy to find with a google search and this solution would be the most elegant, semantic and seo friendly you could achieve- without using javascript. 使用谷歌搜索很容易找到CSS翻转教程,这个解决方案将是你可以实现的最优雅,语义和seo友好 - 不使用javascript。
example code from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/ 来自http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/的示例代码
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
you can make it like this: 你可以这样做:
<a class="superimage" href="http://yourlink.com"></a>
and the CSS: 和CSS:
.superimage {
background-image: url(superimage.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
opacity: 0.8;
}
.superimage:hover {
background-image: url(superimageonhover.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
}
more help? 更多帮助? just ask
只是问
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.