Javascript图像叠加在IE中不起作用
Javascript Image Overlay not working in IE
我有一个网站页面,我正试图在鼠标悬停或单击时获取次映像以覆盖主映像。图像覆盖操作由主图像上的热点触发。该代码适用于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>
现在这不是一个银盘子,而是一些思考的食物,你应该能够用这种技术来解决你的问题:
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/noe(css的隐藏/显示)
- 波浪号/同级选择器(在本例中,给我下一个带有类x的div)
相关文章:
- window.opener.document在ie中不起作用
- 为什么Telerik cdn在IE中不起作用
- JQuery脚本在IE中不起作用
- 默认光标在IE和Mozilla中不起作用
- Asp自定义验证器在IE-11中不起作用
- knockoutjsforeach在IE 9中不起作用
- 谷歌分析在IE中不起作用
- javascript中的SVG转换在IE 11中不起作用
- 用于播放背景音乐的嵌入式flash播放器在IE浏览器中不起作用
- 在IE中切换javascript不起作用的复选框
- JQuery日期选择器在IE 7上不起作用
- HTML表单在IE中不起作用
- Javascript style.background在IE中不起作用
- 对<asp:IE 10的TextBox;不起作用
- Javascript/AAJAX在Opera中不起作用,在FF/IE/Chrome中完美工作
- SPA异步调用在IE 11中不起作用
- 脚本在IE 9中不起作用
- ng-单击在IE中不起作用的选项选择Angularjs
- html2canvas 代码不起作用 IE 11
- 隐藏选项不起作用IE