How with JQuery cause Hover on diffrent element than mouse is currently on top of

Question

I got image which is partialy overlapped by DIV, this particular image got its border set with CSS in external file to change color when mouse is over image.

problem is when i move mouse from image to div overlapping it, then image losts hover and border is going back to normal state.

How to tell to element with particular ID that mouse is still over it when i enter div above image? I've managed to make detection when mouse is hover DIV but no results with telling to image that mouse is still over it

i want to avoid using altering CSS

$("#imageID").css('border-color','#FFF');

and in some other way cause that behaviour which i'm looking for?

Thanks in advance for answers MTH

Answer 1

Well if this particular div is always floating over the same image then you can add a "hover" class to the lower image when the mouse is hovering the upper div. Then you can still style the image with hover class in your css file.

HTML

<div id="divID"></div>
<img id="imageID" src="" />

jQuery

$("#divID").hover(function() {$("#imageID").addClass("divHover");}, 
                  function() {$("#imageID").removeClass("divHover");});

CSS

#imageID { border-color: #000; }
#imageID:hover, #imageID.divHover { border-color: #FFF; }

Answer 2

Z-index might help. Usually tags are ordered by when they're named. With z-index in css you can change the div to a lower z-index than the image. I'm not sure it'll work in all browsers though w3c says it is, YMMV. W3C z-index