IE mousemove bug

Question

Hi, I have a tooltip script which uses the mousemove jquery function. Everything works fine expect for IE. Take a look here: http://omarabid.com/deploy/ The rectangles are "li" elements. When you move the mouse over, a tag appear. In IE, the tag does appear, but only if you move the mouse over a empty region (in the right). When you move the move over the image, nothing happens which is turning me crazy.

Seems like when the pointer enter the image zone, the tag disappears with fadeout() which is like if the mouse quit the region (which is not true!!)

So where is the problem? Is this an IE bug?

Answer 1

Once your DOM is loaded you have this in your page :

<div id="photo1" class="taggedimg">
    <img id="atag" src="img/photo1.jpg">
    <li style="top: 0px; left: 0px; height: 45px; width: 77px; margin-top: 15px; margin-left: 0px; " class="tag mytag"></li>
    <li style="top: 55px; left: 45px; height: 340px; width: 960px; margin-top: 15px; margin-left: 0px; " class="tag mytag"></li>
</div>

Seems weard to me...

Try preventing default behavior with :

li.mouseenter(function(kmouse) {
    kmouse.preventDefault();
    my_tooltip.css({
        opacity : 0.8,
        display : "none"
    }).fadeIn(400);
}).mousemove(function(kmouse){
    kmouse.preventDefault();
    my_tooltip.css({
        left : kmouse.pageX + 15,
        top : kmouse.pageY + 15
    });
}).mouseleave(function(kmouse) {
    kmouse.preventDefault();
    my_tooltip.fadeOut(400);
});

in imgtag/core.js

Answer 2

I've run into a similar problem. try using mouseenter and mouseleave instead of mouseover and mouseout.

Answer 3

The actual problem lies with the background-color:transparent on the tag class (set a background-color instead and you will see that it works).

use a 1x1 pixel transparent background image instead and you should be fine ..

---

explanation

remove the background-color: transparent and in its place put a background: url(/somepath/transparent.gif) top left repeat;

this transparent.gif should have dimensions 1px x 1px and be transparent. ( here is a download link for one : http://www.imgag.com/product/full/ap/3021018/transparent.gif )