IE工具提示顯示在負面懸停

我正在製作一大堆CSS3動畫和轉換工具提示，它們都可以工作，即使在IE中有後備，因此它們只顯示在文本上方。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下的實際工具提示下方120px時，它會顯示該工具提示。這是因爲在CSS中的

bottom:-120px;

。

我使用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的120像素底部邊界內徘徊時。困惑不是這個詞！

幫助非常感謝，我希望這足以讓你知道我的意思！

來源

2012-06-20 user1470037

只是一個評論，也許你可以使用$或jQuery。你不必混合它們。 –

的確，我已經編輯了帖子，現在我改變了它在我的js中。仍然沒有運氣，但感謝頭！ – user1470037

我想你需要更改下面幾行：

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

到

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

不要addClass或removeClass僅使用名稱中使用.className沒有像點className。

來源

2012-06-20 18:45:48 TheVillageIdiot

我認爲'span'他的意思是標籤名稱，而不是類名。在這種情況下，你的代碼將無法工作。 –

'span'是HTML標記。但是，再次感謝迄今爲止的幫助，我越來越接近解決它！ – user1470037

變化

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

要

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

同爲removeClass

此外，

改變你的風格的名字從.tooltip span在你的CSS .newStyle。

來源

2012-06-20 18:50:18

我製作了一個名爲'.bottomfix {bottom：0}'的新CSS類，然後將js更改爲上述內容，但目前爲止沒有運氣。我將在OP中編輯上面的代碼！ – user1470037

正如@ TheVillageIdiot所說的，當你調用'removeClass'和'addClass'時，你需要刪除點。再試一次。它應該工作。 –

如果您使用display:none而不是opacity:0;，則會更好。寫如下：

.tooltip span{ 
display:none; 
}

來源

2012-06-21 05:14:38 sandeep

IE工具提示顯示在負面懸停

回答

相關問題