在IE9中的jQuery悬停错误

Question

我对IE9有一个真正的问题，我已经写了一些代码与一个同胞SO用户谁让我这么远，但我抓我的头如何如此，因为我的jQuery技能不是很好。

这段代码完全按照我希望它在其他浏览器中工作的方式工作，但它不能在IE9中以我想要的方式工作。问的原因是，大约一半的办公室仍在使用IE9，他们不打算升级。

当用户将鼠标悬停在紫色圆圈上时，会出现一个框，其中详细列出了一些信息，整个框可链接到网站中的页面。如果将鼠标移动到圆周的任何位置，该框不会显示，只有在用户悬停在圆上时才会出现，这正是我想要的。它在IE9中的作用是，如果你在盒子出现的圆圈顶部移动，那么在IE9中该盒子是不可见的，但如果用户鼠标位于按钮上方，它仍然可以工作。

要更好地理解我的问题，如果您在IE9上方的任何其他浏览器中查看它，您会发现它工作正常。然后在IE9中查看它，它看起来很好，直到你将光标移动到其中一个圆圈的上方，并且标题弹出，因为几个圆圈靠得很近，标题变得非常跳跃，并且大部分时间文本剂量与地点匹配。

现在我知道IE9并没有完全支持CSS3和HTML5，我相信这个问题是data-item =“”，IE9部分支持它，或者我不太确定。我将包括HTML，CSS和jQuery代码以及一个JSFiddle，任何帮助都会很棒。

继承人的JSFiddle

下面是HTML代码：

<div id="col5" class="left"> 
<h1>Test</h1> 
<div class="mapbox"><img src="http://www.clker.com/cliparts/4/f/5/6/1223613091548471395shokunin_United_Kingdom_map.svg.hi.png" style="z-index: 101; border: none" width="672" height="744" usemap="#Map" alt="Map"/> 
     <a id="a" class="tooltip js-tooltip" href="#" style="top: -315px; left: 270px; border: none; "><span class="tooltip-wrapper" style="z-index: 103; border: none; "><span class="tooltip-text" style="z-index: 103; cursor: pointer; border: none;">11111111</span></span></a> 
     <a id="b" class="tooltip js-tooltip" href="#" style="top: -150px; left: 365px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">22222222<br /> <span style="color: red;"><strong>N/A</strong></span></span></span></a> 
     <a id="c" class="tooltip js-tooltip" href="#" style="top: -512px; left: 165px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">33333333</span></span></a> 
     <a id="d" class="tooltip js-tooltip" href="#" style="top: -512px; left: 80px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">44444444</span></span></a> 
     <a id="e" class="tooltip js-tooltip" href="#" style="top: -435px; left: 205px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">55555555</span></span></a> 
     <a id="f" class="tooltip js-tooltip" href="#" style="top: -310px; left: 125px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">66666666</span></span></a> 
     <a id="g" class="tooltip js-tooltip" href="#" style="top: -335px; left: 170px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">77777777</span></span></a> 
     <a id="h" class="tooltip js-tooltip" href="#" style="top: -285px; left: 205px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">88888888</span></span></a> 
     <a id="i" class="tooltip js-tooltip" href="#" style="top: -270px; left: 150px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">99999999</span></span></a> 
     <a id="j" class="tooltip js-tooltip" href="#" style="top: -235px; left: 120px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">10101010</span></span></a> 
     <a id="k" class="tooltip js-tooltip" href="#" style="top: -230px; left: 65px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">12121212</span></span></a> 
     <a id="l" class="tooltip js-tooltip" href="#" style="top: -200px; left: -65px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">13131313</span></span></a> 
     <a id="m" class="tooltip js-tooltip" href="#" style="top: -145px; left: -45px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">14141414</span></span></a> 
     <a id="n" class="tooltip js-tooltip" href="#" style="top: -140px; left: -25px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">15151515</span></span></a> 
     <a id="o" class="tooltip js-tooltip" href="#" style="top: -160px; left: 10px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">16161616</span></span></a> 
     <a id="p" class="tooltip js-tooltip" href="#" style="top: -185px; left: 90px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">17171717</span></span></a> 
     <a id="q" class="tooltip js-tooltip" href="#" style="top: -75px; left: -155px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">18181818</span></span></a> 
    </div> 
</div> 
<!-- COL.1 END --><!-- COL.2 END --> 

<div id="col3" class="right"> 

    <h2>Sidebar<img src="#" width="21" height="18" alt="icon" /></h2> 

<div class="box"> 
    <h3>Sidebar</h3> 
    <ul id="locationList"> 
     <li><a data-item="a" href="#">11111111</a></li> 
     <li><a data-item="b" href="#">22222222</a></li> 
     <li><a data-item="c" href="#">33333333</a></li> 
     <li><a data-item="d" href="#">44444444</a></li> 
     <li><a data-item="e" href="#">55555555</a></li> 
     <li><a data-item="f" href="#">66666666</a></li> 
     <li><a data-item="g" href="#">77777777</a></li> 
     <li><a data-item="h" href="#">88888888</a></li> 
     <li><a data-item="i" href="#">99999999</a></li> 
     <li><a data-item="j" href="#">10101010</a></li> 
     <li><a data-item="k" href="#">12121212</a></li> 
     <li><a data-item="l" href="#">13131313</a></li> 
     <li><a data-item="m" href="#">14141414</a></li> 
     <li><a data-item="n" href="#">15151515</a></li> 
     <li><a data-item="o" href="#">16161616</a></li> 
     <li><a data-item="p" href="#">17171717</a></li> 
     <li><a data-item="q" href="#">18181818</a></li> 
     <div class="clear"></div> 
    </ul> 
</div> 

下面是CSS代码：

.tooltip { 
    position: relative; 
    display: inline-block; 
    height: 18px; 
    width: 18px; 
    line-height: 26px; 
    padding: 0 0; 
    border-radius: 15px; 
    font-size: 12px; 
    font-weight: bold; 
    color: #FFF; 
    background: #b71a71; 
    box-shadow: none; 
    white-space: nowrap; 
    cursor: pointer; 
    top: 100px; left: 300px; 
} 
.tooltip.current { 
    background: #b1d12d; 
} 

.tooltip:hover { 
    background: #b1d12d; 
} 
.tooltip-wrapper { 
    pointer-events: none; 
    position: absolute; 
    width: 250px; 
    margin-left: -125px; 
    left: 50%; 
    bottom: 100%; 
    margin-bottom: 5px; 
    text-align: center; 
    text-decoration: none; 
    opacity: 0; 
    transition: opacity 0.5s ease; 
} 
.js-tooltip-active .tooltip-wrapper, 
.tooltip:hover .tooltip-wrapper, 
.tooltip-wrapper:hover { 
    pointer-events: auto; 
    opacity: 1; 
} 
.tooltip-wrapper:after { 
    z-index: 11; 
    display: block; 
    position: absolute; 
    left: 50%; 
    margin-left: -7px; 
    content: " "; 
    width: 0; 
    height: 0; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 7px solid #333; 
} 
.tooltip-wrapper:before { 
    bottom: -9px; 
    display: block; 
    position: absolute; 
    left: 50%; 
    margin-left: -8px; 
    content: " "; 
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-top: 8px solid rgba(255,255,255,0.1); 
} 
.tooltip-text { 
    display: inline-block; 
    position: relative; 
    padding: 6px 9px; 
    z-index: 10; 
    white-space: normal; 
    font-size: 12px; 
    font-weight: normal; 
    line-height: 18px; 
    background: #333; 
    background: rgba(0,0,0,0.8); 
    color: #fff; 
    border-radius: 5px; 
    text-shadow: none; 
    cursor: default; 
    box-shadow: 0 0 rgba(255,255,255,0.1); 
} 

#locationList li a.active { 
    color:#b71a71; 
} 

下面是jQuery代码：

$(document).ready(function() { 
$('.js-tooltip').on('click', function() { 
    $(this).toggleClass('js-tooltip-active'); 
}); 

$('.tooltip').hover(function() { 
    $('a[data-item="'+this.id+'"]').toggleClass('active'); 
}); 

    $('#locationList a').hover(function() { 
    $('#' + $(this).data('item')).toggleClass('js-tooltip-active'); 
    $('#' + $(this).data('item')).toggleClass('current'); 
}); 
}); 

THA NKS。

Answer 1

看来，你的问题是从隐藏使用

.tooltip-wrapper { 
    ... 
    opacity: 0; 
} 

元素依然占据空间，即使你看不到它的提示来了。如果您使用隐藏的东西好像元素

.tooltip-wrapper { 
    ... 
    display: none; 
} 

，然后从选择再次显示元素你拥有了它使用

.js-tooltip-active .tooltip-wrapper, 
.tooltip:hover .tooltip-wrapper, 
.tooltip-wrapper:hover { 
    ... 
    display: block; 
} 

你消除了意想不到的结果您遇到IE 9。这将在下文消除你的淡入效果，所以你可能想有条件地将这个规则适用于IE9，因为它似乎在你正在测试的其他浏览器中工作。考虑为您的工具提示使用现有的库，例如TipTip，我相信这些工具提示允许您尝试实施的工具提示。

编辑：我忘了提及，你的问题的另一个来源可能是使用pointer-events CSS规则，这是not supported by IE 9。

编辑：jsfiddle