javascript - 图像悬停 - 更改效果

Question

当有人将鼠标悬停在图像上时，我实际上想更改图像。

假设我有一张图片：

<img src="image.png"/>

我想用以下悬停效果来改变它：

• 图片应该是可点击的，所以它应该是一个将用户重定向到另一个页面的链接
• 图像的背景应该是黑色的，不透明
• 在图像上，它应该在中间出现另一个图像

怎么可能呢？

Answer 1

我建议你创建一个链接<a class="my-image">foo</a>并使用 css 来获得翻转效果。CSS翻转教程很容易通过谷歌搜索找到，这个解决方案将是你可以实现的最优雅、语义和seo友好的解决方案——无需使用javascript。

来自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;
}

Answer 2

你可以这样：

<a class="superimage" href="http://yourlink.com"></a>

和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;
}

更多帮助？问问