There is a bit of a demo site here:
http://www.teamlalala.com/lark/products-2.html
The problem is with the 20 color divs to the right of the main product
image. Why doesn't the background image remain visible when I mouse
out?
On Apr 25, 1:43 am, Jake Barnes <lawrence.krub...@gmail.com> wrote:
> 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)";
> });
