如何使用css立即更改鼠标悬停时的图像答案

【问题标题】：How to change the image on mouse hover immediately using css如何使用css立即更改鼠标悬停时的图像
【发布时间】：2017-05-18 17:17:17
【问题描述】：

您好，我的网站上有黑白图像，鼠标悬停时需要立即更改图像。但是第一次更改图像需要时间，稍后会立即更改图像。

代码：

 <div id="content">
    <img src="<?php echo base_url();?>theme/images/expertise/1.png" class="images1" onmouseover="this.src='<?php echo base_url();?>theme/images/1.png'" onmouseout="this.src='<?php echo base_url();?>theme/images/expertise/1.png'" />
    <img src="<?php echo base_url();?>theme/images/expertise/2.png" class="images2" onmouseover="this.src='<?php echo base_url();?>theme/images/2.png'" onmouseout="this.src='<?php echo base_url();?>theme/images/expertise/2.png'"/>
</div>

CSS

#content {
  margin-top: 21px;
  margin-bottom: 57px;
 }
.images1,.images2 {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
 }
 .images1:hover,
 .images1:focus,
 .images1:active,
 .images2:hover,
 .images2:focus,
 .images2:active
  {
    -webkit-transform: scale(1.1);
     transform: scale(1.1);
   }

【问题讨论】：

有什么问题吗？这是一个声明
图片尺寸是多少？加载是否太重，这就是为什么要花很多时间？
您需要预取悬停图像。见：stackoverflow.com/questions/3646036/…
如果您想避免等待，您需要在悬停效果之前预加载图像。
图片尺寸为137*74

标签： jquery html css

【解决方案1】：

最简单的方法是创建一个图像，将两张图片保存在一个文件中。然后使用具有所需大小的 div 和图像作为背景。

您定义位置，以便第一张图片可见，另一张不可见。

如果你悬停，你会改变位置，所以另一张图片会显示出来。

这里有一个比较相似的问题：CSS hover image position change

【讨论】：

【解决方案2】：

您必须调整 URL，但如果这对您有用，请告诉我。

.images1,.images2 {
    display: block;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition: transform .3s ease;
    will-change: transform;
    margin-bottom: 20px;
 }
 .images1:hover,
 .images1:focus,
 .images1:active,
 .images2:hover,
 .images2:focus,
 .images2:active
  {
     transform: scale(1.1);
  }

<div id="content">
    <img src="http://placehold.it/350x100/ffffff" class="images1" onmouseover="this.src='http://placehold.it/350x100/003500'" onmouseout="this.src='http://placehold.it/350x100/ffffff'" />
    <img src="http://placehold.it/350x100/ffffff" class="images2" onmouseover="this.src='http://placehold.it/350x100/003500'" onmouseout="this.src='http://placehold.it/350x100/ffffff'"/>
</div>

【讨论】：

不，它只显示和以前一样

【解决方案3】：

在 header.php 文件中添加了预加载脚本

<script type="text/javascript">
 function preload(arrayOfImages) {
var ImageContainer ="<div style='display:none;'>";
$(arrayOfImages).each(function(){
 ImageContainer += "<img src='"+this+"''>";
});

ImageContainer +="</div>";
$(".ourexpertise").append(ImageContainer);

}
// Usage:
var arrayOfImages =[
'http://www.example.com/theme/images/1.png',
'http://www.example.com/theme/images/2.png',
'http://www.example.com/theme/images/3.png'
 ];
 $(document).ready(function(){
preload(arrayOfImages);
});
</script>

【讨论】：