在图像悬停时更改为另一个图像？

Posted 2023-03-06

【中文标题】在图像悬停时更改为另一个图像？

【英文标题】：On hover of an image change to another image?

【发布时间】：2014-07-31 17:51:06

【问题描述】：

基本上我正在寻找的是能够使图像旋转 360 度并放大图像，我已经把这两个下来了。

我现在需要做的是，弄清楚如何让它真正旋转 360 度并放大到不同的图像，这是我拥有的 css：

.rotate img 
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;

.rotate img:hover 
    cursor: crosshair
    -moz-transform: rotate(360deg) scale(1.25);
    -webkit-transform: rotate(360deg) scale(1.25);
    -o-transform: rotate(360deg) scale(1.25);
    -ms-transform: rotate(360deg) scale(1.25);
    transform: rotate(360deg) scale(1.25);

这段代码运行良好，我只需要知道如何让它变成不同的图像。

【问题讨论】：

无法使用 CSS，但可以通过交换图像源使用 javascript 来完成。

【参考方案1】：

这可以通过添加一些 JavaScript 来完成...另外 - 旋转 2 个 div 而不是 img。在每个 div 中放置一个图像，在另一个上。旋转时，将重叠的 div（更改不透明度）淡化为 100%。这将为您提供将一张图像淡入下一张图像的效果。

【参考方案2】：

如果您可以将<div> 与背景图像一起使用，而不是实际的<img>，您可以很容易地使用css。

Working Example

.rotate 
    background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg") no-repeat;
    height: 100px;
    width:100px;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;

.rotate:hover 
    background: url("http://lorempixel.com/output/abstract-q-c-100-100-8.jpg") no-repeat;
    cursor: crosshair;
    -moz-transform: rotate(360deg) scale(1.25);
    -webkit-transform: rotate(360deg) scale(1.25);
    -o-transform: rotate(360deg) scale(1.25);
    -ms-transform: rotate(360deg) scale(1.25);
    transform: rotate(360deg) scale(1.25);

【讨论】：

哇，非常感谢。一切都完美无缺。谢谢你的代码。