1

我正在制作一大包带有 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);

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

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 底部边界内时仍会显示工具提示。迷茫不是这个词！

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

4

3 回答 3

0

我认为您需要更改以下几行：

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

至

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

不要使用.classNamewithaddClass或removeClass只使用没有点 like 的名称className。

于 2012-06-20T18:45:48.997 回答
0

改变

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

至

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

与removeClass

还，

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

于 2012-06-20T18:50:18.223 回答
0

如果您使用display:none而不是opacity:0;. 像这样写：

.tooltip span{
 display:none;
}
于 2012-06-21T05:14:38.947 回答