IE9中的jQuery悬停错误

Question

我在IE9上遇到了一个真正的问题，我和一个让我走到这一步的SO用户一起写了一些代码，但我对如何做到这一点感到挠头，因为我的jQuery技能不是很好。

这段代码完美地工作，我想它在其他浏览器，但它不工作在IE9的方式，我想要它。问这个问题的原因是，大约一半的办公室仍在使用IE9，他们不打算升级。

它的作用是当用户将鼠标悬停在紫色圆圈上时，会出现一个详细说明一些信息的框，并且整个框可以链接到站点中的一个页面。如果您将鼠标移动到圆圈周围的任何地方，则不会出现该框，它只会在用户将鼠标悬停在圆圈上时出现，这正是我想要的。它在IE9中的作用是，如果你在圆圈的顶部移动，框就会出现，所以在IE9中，框是不可见的，但如果用户鼠标在按钮上方，它仍然有效。

为了更好地理解我的问题，如果你在IE9以上的任何其他浏览器中查看它，你会看到它工作得很好。然后在IE9中查看它，它看起来很好，直到你将光标移动到其中一个圆圈上方，标题弹出，因为一些圆圈靠得很近，标题变得非常跳跃，大多数时候文本与位置不匹配。

现在我知道IE9不完全支持CSS3和HTML5，我相信这个问题是与数据-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');
});
});

谢谢。

Answer 1

您的问题似乎来自于使用

隐藏工具提示

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

元素仍然占据空间，即使你看不见它。如果你用

之类的东西隐藏元素

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

然后在选择器中使用

再次显示元素

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

可以消除您在ie9中遇到的意外结果。这将消除你的渐隐效应，所以你可能想有条件地应用这条规则，只对IE9，因为它似乎在你正在测试的其他浏览器中工作。考虑为你的工具提示使用一个现有的库，比如TipTip，我相信它允许像你正在尝试实现的那样的粘性工具提示。

编辑:我忘了说，你的问题的另一个来源可能是使用pointer-events CSS规则，这是不支持ie9。

编辑:jsfiddle