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

更多帮助？请问

图像悬停 - 更改效果

2 个答案: