Question

我正在制作一大堆具有CSS3动画和过渡功能的工具提示，它们都可以工作，即使在具有后备功能的IE中也是如此，因此它们只显示在文本上方。

我正在使用以下内容显示实际的工具提示。

.tooltip span {
width:200px;
height:auto;
padding: 5px;
left: 50%;
margin-left: -110px;
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
text-align: center;
border: 5px solid #57a0d8;
background:#FFF;
text-indent: 0px;
position: absolute;
pointer-events: none;
bottom: -120px;
opacity: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
box-shadow: 0px 0px 8px rgba(0,0,0,0.4);

其余的只是动画。现在，当我将120px悬停在IE中的实际工具提示下方时，它会显示该工具提示。这是因为

bottom:-120px;

CSS中的

。

我正在使用jQuery尝试使用以下内容覆盖此问题：

修改

新JS：

  $(function() {
if ($.browser.msie && parseInt($.browser.version) < 9)
    {     
              $('.tooltip span').hide(); 
          $(".tooltip").hover(function() {
$(this).find('span').addClass(".bottomfix");
}, function() {
$(this).find('span').removeClass(".bottomfix");
});
    }
  });

新的CSS修复：

.bottomfix {
    bottom:0px;
}

希望有些有用的信息！代码有效，但CSS更改除外。我一定做错了什么。有没有可能的解决方案我可以在CSS中修改为IE修复此问题，或使用jQuery的解决方案？

编辑2：

它在IE8中工作正常 - 但在IE9中悬停在120px底部边界内时仍显示工具提示。困惑不是这个词！

非常感谢帮助，我希望这足以让您了解我的意思！

Answer 1

我认为您需要更改以下内容：

jQuery(this).addClass(".tooltip span");

到

jQuery(this).addClass("tooltip span");

不要将.className与addClass或removeClass一起使用，只使用不带className之类的点名称。

Answer 2

更改

$(this).addClass(".tooltip span");

要

$(this).find('span').addClass("newStyle");

与removeClass

相同

此外，

在CSS中将您的样式名称从.tooltip span更改为.newStyle。

Answer 3

如果您使用display:none代替opacity:0;，情况会更好。写得像这样：

.tooltip span{
 display:none;
}

IE工具提示在负悬停时显示

3 个答案: