jQuery on（）事件可以在chrome中找到，但不能在IE中找到

首先，我讨厌IE，但我们都必须支持它

我有一张地图，在这张地图上我有“热点”，用户在上面悬停，显示一幅图像，并写下一些文字

<script src="jquery.js"></script>


<div style="width: 673px; position: relative" id="map">
    <div style="width: 45px; height: 45px; position: absolute; top: 550px; left: 295px;" id="meeting1"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 470px; left: 605px;" id="meeting2"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 155px; left: 438px;" id="meeting3"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 195px; left: 275px;" id="meeting4"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 217px; left: 230px;" id="meeting5"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 505px; left: 235px;" id="meeting6"></div>
    <img src="map-tour.png" width="673px" />

    <div style="width: 270px; height: 45px; border-style: solid; border-color: black; position: absolute; top: 600px; left: 370px;" id="display"></div>
</div>

<script>
$('#display').html('<p>--</p>');

$(document).ready(function () {
    $("#meeting1").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test1</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting2").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test2</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting3").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test3</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting4").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test4</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting5").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test5</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting6").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test6</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });
});
</script>

$（'#display'）.html（'--
'）；
$（文档）.ready（函数（）{
美元（“#会议1”）。于({
mouseenter:function（）{
$（this.html（“”）；
$（“#display”）.html（“Test1
”）；
},
mouseleave:function（）{
$（this.html（“”）；
$（“#display”）.html（“--
”）；
}
});
美元（“#会议2”）。于({
mouseenter:function（）{
$（this.html（“”）；
$（“#display”）.html（“Test2
”）；
},
mouseleave:function（）{
$（this.html（“”）；
$（“#display”）.html（“--
”）；
}
});
美元（“#会议3”）。于({
mouseenter:function（）{
$（this.html（“”）；
$（“#display”）.html（“Test3
”）；
},
mouseleave:function（）{
$（this.html（“”）；
$（“#display”）.html（“--
”）；
}
});
美元（“#会议4”）。于({
mouseenter:function（）{
$（this.html（“”）；
$（“#display”）.html（“Test4
”）；
},
mouseleave:function（）{
$（this.html（“”）；
$（“#display”）.html（“--
”）；
}
});
美元（“#会议5”）。于({
mouseenter:function（）{
$（this.html（“”）；
$（“#display”）.html（“Test5
”）；
},
mouseleave:function（）{
$（this.html（“”）；
$（“#display”）.html（“--
”）；
}
});
美元（“#会议6”）。于({
mouseenter:function（）{
$（this.html（“”）；
$（“#display”）.html（“Test6
”）；
},
mouseleave:function（）{
$（this.html（“”）；
$（“#display”）.html（“--
”）；
}
});
});

这在Chrome中可以正常工作（事实上jQuery.hover工作得很好），但在IE中却不行；边框颜色：#0000；在#meeting1 Div的风格中，它工作得很好

有人能帮忙吗

---

提前感谢。

如果您使用鼠标输入和鼠标离开，请使用jQuery悬停，它会更好、更具体。而且也适合所有人

$("#meeting5").hover(
     function() {
     $(this).html("<img src='map-tour-hover-icon.png' width='75'
       style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test5</p>");
        },
        function() {
            $(this).html("");
            $("#display").html("<p>--</p>");

    });

$（“#会议5”）。悬停(
函数（）{
$（this.html（“”）；
$（“#display”）.html（“Test5
”）；
},
函数（）{
$（this.html（“”）；
$（“#display”）.html（“--
”）；
});

找到了答案

首先，我创建了一个45px x 45px的透明图像，然后修改HTML以包含此图像

<div style="width: 45px; height: 45px; position: absolute; top: 550px; left: 295px;" id="meeting1"><img src="t.png" /></div>

然后我将javascript修改为

$("#meeting1 img").on({
    mouseenter: function() {
        $(this).attr("src", "map-tour-hover-icon.png");
        $(this).attr("width", "75");
        $(this).attr("style", "position:absolute; top: -15px; left: -15px;");
        $("#display").html("<p>Text in there</p>");
    },
    mouseleave: function() {
        $(this).attr("src", "t.png");
        $('#display').html('<p>Replacement Text here</p>');
    }
});

$（“#会议1 img”）。于({
mouseenter:function（）{
$（this.attr（“src”，“map tour hover icon.png”）；
$（此）.attr（“宽度”，“75”）；
$（this）.attr（“样式”，“位置：绝对；顶部：-15px；左侧：-15px；”）；
$（“#display”）.html（“文本在那里
”）；
},
mouseleave:function（）{
$（this.attr（“src”，“t.png”）；
$（“#display'）.html（“此处替换文本”
”）；
}
});

---

因此，与其更新div中的HTML，不如更新图像及其属性。

能否将相关的CSS和HTML标记放在一个目录中供我们使用？为了避免所有重复的代码，我建议将处理程序绑定到一个类，而不是每个ID，并为它们提供处理程序用来区分它们的

data XXX

属性（它可以使用

$（this）.data（“XXX”）

来获取值）。忘记添加了，“map”已经有了“off”图标，所以不需要它。？？？你确定你正在使用一个好的ie版本吗？？请发布您的整个脚本，或提供链接。获取一个jsfiddle.jsfiddle.net/UyM6q/1是指向代码的链接，尽管我发布的是所有内容……您的部门没有内容，它们运行良好，内部有一些东西。（在IE中）。在其他情况下，它无论如何都会起作用