IE鼠标移动错误答案

【问题标题】：IE mousemove bugIE鼠标移动错误
【发布时间】：2010-07-21 22:23:12
【问题描述】：

我有一个使用 mousemove jquery 函数的工具提示脚本。对于 IE，一切正常。看这里：http://omarabid.com/deploy/ 矩形是“li”元素。当您将鼠标移到上方时，会出现一个标签。在 IE 中，标签确实会出现，但前提是您将鼠标移到空白区域（在右侧）上。当您将移动移动到图像上时，什么都没有发生，这让我发疯了。

似乎当指针进入图像区域时，标签随着淡出（）消失，就像鼠标退出该区域（这不是真的！！）

那么问题出在哪里？这是 IE 的错误吗？

【问题讨论】：

标签： jquery internet-explorer

【解决方案1】：

实际的问题在于标签类上的background-color:transparent（改为设置背景色，你会看到它有效）。

改用 1x1 像素的透明背景图片，你应该没问题..

解释

删除 background-color: transparent 并在其位置放置一个 background: url(/somepath/transparent.gif) top left repeat;

这个transparent.gif 的尺寸应该是 1px x 1px 并且是透明的。（这里有一个下载链接：http://www.imgag.com/product/full/ap/3021018/transparent.gif）

【讨论】：

神奇的答案！ :) 我永远也找不到原因。顺便说一句，我不明白你的解决方案:(
不需要使用空白的 gif，只需输入任何不存在的 url，例如 background-image: url(#) 就可以了
像魅力一样工作！谢谢

【解决方案2】：

一旦你的 DOM 被加载，你的页面中就会有这个：

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

对我来说似乎已经磨损了......

尝试使用 :

防止默认行为

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

在 imgtag/core.js 中

【讨论】：

【解决方案3】：

我遇到了类似的问题。尝试使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout。

【讨论】：