I have an image and rollover image. Using jQuery or CSS, I want to show/hide the rollover image when the onmousemove/onmouseout event happen on the parent div (containing the image).

How can I do it?

Edit: HTML posted below by request. Not relevant to the question, but as an FYI HTML is built on a 30 column fluid grid.

Upon hover of the top div (row-fluid) the image (image.png) should change to a different source image (imagehover.png).

<div class="row-fluid" style="padding-top:1em">
            <div class="span4">
              //Random content
            </div>
            <div class="span8 offset1">
              //Random content
            </div>
            <div class="span9 offset3">
              <ul>
                <li>//Random content</li>
                <li>//Random content</li>
                <li>//Random content</li>
             </ul>
            </div>
            <img src='../../images/image.png>
<div>

I have an image and rollover image. Using jQuery or CSS, I want to show/hide the rollover image when the onmousemove/onmouseout event happen on the parent div (containing the image).

How can I do it?

Edit: HTML posted below by request. Not relevant to the question, but as an FYI HTML is built on a 30 column fluid grid.

Upon hover of the top div (row-fluid) the image (image.png) should change to a different source image (imagehover.png).

<div class="row-fluid" style="padding-top:1em">
            <div class="span4">
              //Random content
            </div>
            <div class="span8 offset1">
              //Random content
            </div>
            <div class="span9 offset3">
              <ul>
                <li>//Random content</li>
                <li>//Random content</li>
                <li>//Random content</li>
             </ul>
            </div>
            <img src='../../images/image.png>
<div>

• javascript
• jquery
• css
• mouseevent
• mouseover

• 2 Posting the corresponding HTML will help – Chandu Commented Jul 17, 2012 at 20:24
• 1 Use a sprite as background image and change background position in a :hover rule: stackoverflow./questions/5614430/… – gilly3 Commented Jul 17, 2012 at 20:38

6 Answers 6

You want to do something like this: full_path_to_css parent:hover child

full_path_to_css parent:hover child {
  styles for your item
}

eg:

html (the div.img can be anything):

<div class="parent">
  <div class="img">
  </div>
</div>​​​​​​​​​​​​​​​​​​

css:

div.​parent​ {
  width:200px;
  height:200px;
  background-color:red;
}
div.img {
  width:100px;
  height:100px;
  background-color:blue;
}

div.parent:hover div.img {
  background-color:green;
}​

if you want to test check here: http://jsfiddle/NicosKaralis/kd6wy/

just to remember, the div with img class can be any element, doesn't need to be div and you can change the css styles as you wish, the only thing you need to watch is the parent:hover child

EDIT

Just to clarify one thing: the item with :hover is the parent on witch you want to detect the hover action, and the child is the item on witch you want to change the css rules

EDIT AGAIN

<div id="parent" class="row-fluid" style="padding-top:1em">
        <div class="span4">
          //Random content
        </div>
        <div class="span8 offset1">
          //Random content
        </div>
        <div class="span9 offset3">
          <ul>
            <li>//Random content</li>
            <li>//Random content</li>
            <li>//Random content</li>
         </ul>
        </div>
        <img class="child" src='../../images/image.png>
<div>

on your code you will need:

div#parent.row-fluid img.child {
  display:none;
}
div#parent.row-fluid:hover img.child {
  display:block;
}

this will make your image only show up if the mouse is over your div

Should just be as easy as attaching a mouseover and mouseout event handlers to the parent div and then manipulating the containing img element.

var rolloverImage = ...
var origImage = ...
$("#parentDivId")
       .mouseover(function() {
          $("#parentDivId img").attr("src", rolloverImage)
       })
       .mouseout(function() {
          $("#parentDivId img").attr("src", origImage)
       })

Try:

$('div.row-fluid').hover(function() {
    $(this).find('img').attr('src', 'http://dummyimage./100x100/000/fff');
}, function() {
    $(this).find('img').attr('src', 'http://www.placekitten./100/100');
});​

jsFiddle example

Without having any html to test with, this is just something I thought up in my head. Not sure if it will work or not, but I don't see why it wouldn't.

$('div').mouseenter(function() {
    var image = $('img', this);

    $(image.attr('src', 'new-image-src.jpg');
}).mouseleave(function () {
    var image = $('img', this);

    $(image).attr('src', 'old-image-src.jpg');
});

You can use this code to "show/hide the rollover image"

#parentDiv > img {
  display: none;
}
#parentDiv:hover > img {
  display: block;
}

The > allows you to select img tags that are the direct descendents of #parentDiv (I gave the outer div that ID). Then we're just setting a different style for it on regular and hover states.

Answering my own question, as I used elements of others' ments and answers to create a hybrid: a sprite, totally CSS solution. I find this to be optimal.

Per @gilly3 "Image swaps are best done with a sprite, so that there is never any delay switching between the images. Put both versions of the image side by side in a single file. Set that image to be the background of a div, and adjust the background position to display one or the other image." For this example, I will use a 96px (height) by 27px (width) sprite, using my em values.

In HTML replace img line with:

<div class="sprite-image"></div>

CSS:

.sprite-image {
{
background-image: url(../../images/image.png);
height: 3.7em;
width: 27px;
}

.row-fluid:hover .sprite-image
{
background-position: 0px -3.7em;
}