Question

嗨我在鼠标悬停时在我的网站上有黑白图像需要立即更改图像。但是以后第一次更改图像需要时间才能立即更改图像。

代码：

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

Answer 1

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

你定义了这个位置，第一张图片是可见的而另一张不是。

如果您悬停，则更改位置，以便显示其他图片。

这是一个相对类似的问题：CSS hover image position change

Answer 2

您必须调整网址，但请告诉我这是否适合您。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

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

3 个答案: