IE DIV悬停区域不一样.直到我添加背景颜色

IE DIV hover area not the same. until I add a background color

本文关键字：添加 背景 颜色 DIV 悬停 区域 不一样 IE      更新时间：2023-09-26

基本上我用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() {
    });
})

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

$('.rollover').mouseover(function() {
}).mouseout(function() {
});

虽然 <div> 元素是块，但默认情况下<a>元素是内联的。这可以使它的盒子的行为与你在尝试想象它的盒子将如何呈现和行为时所期望的有所不同。

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

您甚至应该能够侥幸 移除<a>内的<div> .

理想情况下，我会在<a>之外交换<div>。

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

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

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

$(".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。

问题最终被淡化。我没有解释弹出窗口是绝对定位的，并且位于所有翻转的顶部。即使 z 索引集和不透明度为 0，弹出窗口仍然是交互式的。我需要从显示屏中删除弹出窗口。因此，在这种情况下使用淡出是可行的。

不过，感谢大家对此的帮助。你们摇滚！

相关文章：