Question

我在使用IE9时遇到了一个真正的问题，我已经写了一些代码，其中有一个SO用户已经让我这么远，但我正在摸索如何这样做，因为我的jQuery技能不是很好

这段代码非常适合我在其他浏览器中的使用方式，但它在IE9中不能像我想要的那样工作。问的原因是大约一半的办公室仍在使用IE9，他们不打算升级。

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

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

现在我知道IE9并不完全支持CSS3和HTML5，而且我认为这个问题与IE9部分支持它或者我不太确定的事情的data-item =“”有关。

我将包含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;
}

您消除了在IE 9中遇到的意外结果。这将消除您的淡入效果，因此您可能希望有条件地将此规则应用于IE9，因为它似乎在您正在测试的其他浏览器中工作。考虑使用现有的库作为工具提示，例如TipTip，我认为它允许使用您尝试实施的工具提示。

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

修改：jsfiddle

IE9中的jQuery Hover错误

1 个答案: