[jQuery] why can't I get a background image to remain on div during mouseout?

[Jake Barnes]

This should be the easiest thing in the world - set a background image
for a div on mouseover.

I'm working on a color picker for a clothing store. The customer can
choose any of 20 colors. The colors are represented on screen by 20
tiny divs, each with a background color. When the customer wants to
see a particular color variation, for the clothing, they mouse over
the div with that color. A background image is then set that
highlights that div, showing it is choosen. This background image
should remain till another color div is mouseover-ed.

The image appears on hover, then disappears on mouseout. I can not
figure out why it disappears on mouseout.

I've tried several variations of the following jQuery  code, but the
back ground image still disappears on mouseout. I also removed the
background image from the hover rule in the style sheet - it made no
difference.



  // 04-24-09 - the little color divs have this styling:
  //
  //    div.color-row div:hover{
  //            background: url(../img/bg-color.gif) no-repeat;
  //            border:0px;
  //            padding:2px;
  //            margin:1px;
  //    }
  //
  // but this style needs to more than onhover. It needs to be
onmouseover, so
  // it can stick after mouseout. For this task, we can reuse almost
the same
  // code as we used in "thumbnail_borders.js".

  $("div.color-row div").mouseover(function() {
    // first, lets get rid of this border that may be on any of
    // the other divs. /index.php/t-55226.html
    $("div.color-row div").css("backgroundImage", "");

    this.style.background = "url(img/bg-color.gif)";
  });


  $("div.color-row div").mouseout(function() {
    // first, lets get rid of this border that may be on any of
    // the other divs.
    $("div.color-row div").css("backgroundImage", "");

    this.style.background = "url(img/bg-color.gif)";
  });