すぐにcssを使用してマウスのホバーで画像を変更するには

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

は、それが

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

Answer 2

最も簡単な方法は、一つのファイルに両方の画像を保持する画像を作成することです。 次に、目的のサイズのdivとイメージを背景として使用します。

位置を定義すると、最初の画像は表示され、もう1つは表示されません。

マウスを動かすと位置が変わり、他の画像が表示されます。 CSS hover image position change

Answer 3

あなたは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>