Hiding and displaying an image in mouse over action in a div

Question

Im trying to hide a specific image in mouse over and display another image. The opposit will be done when mouseout. Below is the code I wrote,

<div id="console" onmouseover="$(this).find('#offer_image').css({display: none});$(this).find('#offer_image_selected').css({visibility: visible});"
     onmouseout="$(this).find('#offer_image').css({visibility: visible});$(this).find('#offer_image_selected').css({display: none});" >

But it doesn't work when I run the application. Can anyone point out what has gone wrong in it?
Thanks a lot!

@Connor why use css3 when its perfectly possible in previous standards? — Jon Taylor, Jun 27 '12 at 00:15
@Connor You mean loading different CSS in onmouseover and onmouseout? — user1266343, Jun 27 '12 at 00:16

score 5 · Accepted Answer · answered Jun 27 '12 at 00:17

If your using jQuery try

<div id="console"
     onmouseover="$(this).find('#offer_image').hide(); $(this).find('#offer_image_selected').show();"
     onmouseout="$(this).find('#offer_image').show(); $(this).find('#offer_image_selected').hide();">

This uses show() and hide() methods from jQuery.

Otherwise use the following:

<div id="console"
     onmouseover="$(this).find('#offer_image').css('display', 'none'); $(this).find('#offer_image_selected').css('display', 'block');"
     onmouseout="$(this).find('#offer_image').css('display', 'block'); $(this).find('#offer_image_selected').css('display', 'none');" >

score 1 · Answer 2 · answered Jun 27 '12 at 00:17

I'd actually do this entirely with CSS. Try the following:

#console #offer_image,#console:hover #offer_image_selected{display:block;}
#console:hover #offer_image,#console #offer_image_selected{display:none;}

proof of concept JSFiddle: http://jsfiddle.net/86DJu/

score 1 · Answer 3 · answered Jun 27 '12 at 00:19

You can do something like this, using hover and hide/show:

$(document).ready(function()
{
    $('#console').hover(function()
    {
        $(this).find('#offer_image').hide();
        $(this).find('#offer_image_selected').show();
    }, function()
    {
        $(this).find('#offer_image').show();
        $(this).find('#offer_image_selected').hide();
    });
});

Connor · Answer 4 · 2012-06-27T00:29:54.077

0

How about a little css3? Start out with something like this:

#console {
background-image: url("first-image.jpg")
-moz-transition: all 0.5s; 
-webkit-transition: all 0.5s; 
-o-transition: all 0.5s; 
transition: all 0.5s;
}

#console:hover {
background-image: url("second-image.jpg")
}

http://jsfiddle.net/2wHfN/2/

edited Jun 27 '12 at 00:29

answered Jun 27 '12 at 00:19

Connor

1,024
4
16
24

@TNC Yes, and I'm not going to argue that... this is just another solution. – Connor Jun 27 '12 at 00:28

Hiding and displaying an image in mouse over action in a div

4 Answers4

Linked

Related