Javascript 图像覆盖在 IE 中不起作用答案

【问题标题】：Javascript Image Overlay not working in IEJavascript 图像覆盖在 IE 中不起作用
【发布时间】：2013-07-13 05:17:20
【问题描述】：

我有一个网站页面，我试图让辅助图像在鼠标悬停或单击时覆盖主图像。图像叠加动作由主图像上的热点触发。该代码适用于 Chrome、Safari、Firefox 和 Opera，但不适用于 IE？有谁知道为 IE 更正它的方法吗？

网页：http://www.neurobalancingcenter.com

样式代码：

<style type="text/css">
.imgoverlay 
{
position:absolute;
margin: 10px 0 0 487px;
}
</style>

JavaScript 代码：

<script type="text/javascript">
$(document).ready(function () {
    $('.jkimagelarge').hover(
       function () {
           $('.pic').prepend('<div class="imgoverlay"><img src="' + $(this).attr('pic') + '" /></div>');
       },
       function () {
           $('.imgoverlay').each(function () { $(this).hide(); });
       }
    );
});

</script>

正文代码：

<div class="pic">
<map id="FPMap0" name="FPMap0">
<area coords="508, 227, 738, 252" href="#" pic="/images/what_is_bwo.jpg" shape="rect" class="jkimagelarge" />
<area coords="508, 252, 726, 279" href="#" pic="/images/why_bwo.jpg" shape="rect" class="jkimagelarge" />
<area coords="508, 279, 667, 300" href="#" pic="/images/how_bwo.jpg" shape="rect" class="jkimagelarge" />
</map>
<img src="images/homepage_a_focused_mind.jpg" alt="" title="" usemap="#FPMap0" />
</div>

【问题讨论】：

你不需要图像映射。
您不只是使用 :hover 选择器并使用背景图像以这种方式交换图像是否有特定原因？那么你根本就不需要图像映射。
在您的代码中，每次悬停时，您都会向DOM 添加新元素，并且永远不会删除它们，因此每次添加的元素越来越多。
哪个 IE 版本？ IE 使用的是什么渲染模式？你使用的是什么 jQuery 版本？ IE控制台有错误吗？

标签： javascript html css internet-explorer

【解决方案1】：

现在这不是一个银盘，而是一些值得深思的东西，你应该可以用这个技术解决你的问题：

http://jsbin.com/aqobuj/1/edit

a {
  display:block;
  border:solid;
}
div {
  border:solid;
  height:100px;
  display:none;
}
a.one:hover ~ div#one {
  display:block;
}
a.two:hover ~ div#two {
  display:block;
}
a.three:hover ~ div#three {
  display:block;
}

使用的技术：

悬停 CSS 伪选择器
display:block/none（css 的隐藏/显示）
波浪号/兄弟选择器（在这种情况下给我下一个具有 x 类的 div）

【讨论】：