jQuery on()事件可以在chrome中查找，但不能在IE中查找
jQuery on()事件可以在chrome中查找，但不能在IE中查找
提问于 2012-10-02 23:57:54
首先，我讨厌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>这在Chrome中可以正常工作(事实上jQuery.hover运行得很好)，但在IE中就不行了。但是，如果我在#meeting1 div的样式中添加border- style : solid；border-color：#0000；，它工作得很好！
有人能帮上忙吗！？
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-03 16:31:40
我想通了。
首先，我创建了一个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>');
}
});因此，我不是更新div中的HTML，而是更新图像及其属性。
Stack Overflow用户
发布于 2012-10-03 00:00:58
如果您使用鼠标输入和鼠标离开，使用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>");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12693909
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号