1

基本上我使用 DIV/CSS/JS 制作了一个图像映射

我的翻转链接设置如下：

<a class="rollover" id="01" href="#" target="_blank">
      <div class="mapLinkBox" id="mapLink01">&nbsp;</div>
</a>

CSS：

.mapLinkBox {
    display: block;
    z-index: 9999;
    overflow: hidden;
    position: absolute;
}
#mapLink01 {
    bottom: 31px;
    left: 35px;
    width: 200px;
    height: 200px;
}

但是在 IE 中，链接悬停区域受到某些东西的影响并且无法正常工作。什么可能导致问题？

用于悬停的 jQuery：

$(".rollover").each(function() {
    $(this).hover(function() {

    },function() {

    });
})
4

5 回答 5

1

尝试使用mouseover，我过去遇到过问题hover。你也可以稍微清理一下你的代码，你有一些冗余的选择器：

$('.rollover').mouseover(function() {

}).mouseout(function() {

});
于 2012-06-18T15:32:21.540 回答
0

理想情况下，我会<div>交换<a>.

根据HTML 4.01 规范 ，可能只包含内联元素，其中 a 是块元素。

尽管大多数浏览器在处理盒模型方面都做得更好，但 IE 在盒模型（尤其是 IE6-IE8）方面仍然是个白痴，这是臭名昭著的。

尝试交换您的元素（更改您的 css 和 jquery 以匹配新的 dom）。

于 2012-06-18T15:39:17.763 回答
0

问题最终变成了fadeTo。我没有解释弹出窗口是绝对定位的并且位于所有翻转的顶部。即使 z-index 设置和不透明度为 0，弹出窗口仍然是交互式的。我需要从显示中删除弹出窗口。所以在这种情况下使用fadeOut 是可行的。

感谢大家对此的帮助。你们真棒！

于 2012-06-19T00:15:53.703 回答
0

虽然<div>元素是块，但<a>默认情况下元素是内联的。这会使盒子的行为与您在尝试想象其盒子的渲染和行为方式时所期望的不同。

尝试设置display:block元素.rollover，看看是否可以为您解决问题。请注意，它不再用作文本（显然），但<div>无论如何您都在附加一个内部，我假设这就是您的目标布局。

您甚至应该能够摆脱<div>.<a>

于 2012-06-18T15:27:59.390 回答
0 
$(".rollover").on('hover', function(e) {
  if(e.type == 'mouseenter') {
     // do something for mouseover
  } else {
     // do something for mouseout
  }
});

或者

$(".rollover").hover(function(e) {
     // do something for mouseover
  }, function() {
     // do something for mouseout
  }
});

您不需要循环将悬停效果绑定到.rollover.

于 2012-06-18T15:34:49.783 回答