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; }