IE DIV懸停區域不一樣。 直到我添加背景色

Question

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

    });
})

Answer 1

嘗試使用mouseover ，過去我遇到過hover問題。 您還可以稍微清理一下代碼，有一些冗余的選擇器：

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

}).mouseout(function() {

});

Answer 2

當<div>元素是一個塊時，默認情況下<a>元素是內聯的。 這可能會使它的框的行為與您嘗試想象其框將如何呈現和表現時所期望的有所不同。

嘗試為.rollover元素設置display:block ，看看是否能為您解決。 請注意，它已經不再（顯然）用作文本，但是無論如何您都在內部添加了<div> ，並且我假設這是您想要的布局。

您甚至還可以刪除<a>內部的<div> 。

Answer 3

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

Answer 4

理想情況下，我將在<a>之外交換<div> 。

根據HTML 4.01規范，規范只能包含內聯元素，並且是塊元素。

盡管大多數瀏覽器在處理盒模型方面都做得更好，但以盒模型（尤其是IE6-IE8）而論，IE仍然是個白痴而臭名昭著。

嘗試交換您的元素（更改CSS和jquery以匹配新的dom）。

Answer 5

問題最終變成了fadeTo。 我沒有解釋彈出窗口是絕對放置並位於所有翻轉之上的。 即使將z-index設置且不透明度設置為0，彈出窗口仍然是交互式的。我需要從顯示中刪除彈出窗口。 因此，在這種情況下使用fadeOut可以解決問題。

謝謝大家的幫助。 你們好棒！