gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 18:40:55 24 4
gpt4 key购买 nike

我有一个网站页面,我试图让次要图像在鼠标悬停或单击时覆盖主要图像。图像叠加操作由主图像上的热点触发。该代码适用于 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/none(css 的隐藏/显示)
  • 代字号/兄弟选择器(在这种情况下给我下一个带有类 x 的 div)

关于Javascript 图像覆盖在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17623944/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com