nsdlfefinedieicbe nsdlfefinedieicbe - 5 months ago 10
jQuery Question

Change image once we hover on image is not working

once we hover on image, i want to display another image.

<div>
<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>


i tried as below :

I added
class="a1"
, but it did't worked for me.

<a class="a1" href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>


css

.a1:hover {
background-image: url('images/G+1.png');
}

Answer

Here are two solution for your query. (Change image on mouse hover)

HTML + JavaScript Demo

<div class="image_hover">
  <a href="#" rel="nofollow">
    <img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
  </a>
</div>

HTML + CSS Demo

.image_hover {
    position: relative;
    cursor: pointer;
}
.image_hover img {
    position: absolute;
    transition: opacity .5s ease;
}
.image_hover img:hover {
    opacity: 0;
}
<div class="image_hover">
    <img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
    <img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>

Comments