：懸停在IE瀏覽器中不工作的按鈕範圍內

CSS不適用於span標籤懸停，它位於Internet Explorer中的按鈕標籤內，我有按鈕，如果你將鼠標懸停在它上面，它會顯示工具提示，如果你懸停它應該消失的提示，它是工作在FF和Chrome，但不是IE瀏覽器，我知道我應該使用：懸停在IE瀏覽器中不工作的按鈕範圍內

.tooltip：懸停的.tooltiptext

代替

。的ToolTipText：懸停

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 

 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
} 
 

 
.tooltiptext:hover { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body style="text-align:center;"> 
 

 
<div class="tooltip"> 
 
    <button type="button">Hover me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
    </button> 
 
</div> 
 
</body> 
 
</html>

什麼建議，我開過的jQuery使用。謝謝。

來源

2017-10-20 Hessam

哪個版本的IE瀏覽器導致的問題？ – smekosh

我正在測試IE 11 – Hessam

好吧，花了我一點時間來習慣jQuery如何在JSFiddle中工作，但如果你願意使用jQuery，那麼這個應該應該工作。

$('.tooltip').mouseover(function() { 
 
    $('.tooltiptext').css('visibility', 'visible'); 
 
}); 
 

 
$('.tooltip').mouseout(function() { 
 
    $('.tooltiptext').css('visibility', 'hidden'); 
 
});

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 

 
/* .tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
} */ 
 

 

 
/* .tooltiptext:hover { 
 
    display: none; 
 
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body style="text-align:center;"> 
 

 
    <div class="tooltip"> 
 
    <button type="button">Hover me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
    </button> 
 
    </div> 
 
</body>

請注意，我已經註釋掉的CSS調整的ToolTipText可見的部分。用這種方法你可以安全地移除它。另外請注意，我的jQuery實現有點麻煩，因爲我忽略了將懸停效果放入函數中。這段代碼只是試圖顯示答案。祝你好運。

來源

2017-10-20 21:06:24

我覺得你不明白我的問題，你的代碼不工作，我需要，如果你懸停的工具提示（我的意思是「tooltiptext」類，然後使其消失）不是按鈕，$（' .tooltip'）。鼠標操作在按鈕上。否則我的代碼工作之前，懸停按鈕，然後懸停工具提示，它應該被隱藏，在IE瀏覽器不工作。 – Hessam

據我所知，你在做什麼是錯的：

了「的ToolTipText」是的「工具提示」的子元素...

..所以當你在徘徊「的ToolTipText」你也徘徊在「工具提示」。事實上，它也不適用於Chrome。它只是閃爍。

當你將鼠標懸停在「工具提示」上時，你應該只顯示「tooltiptext」，當你離開它時隱藏它。

通過刪除如下：

/* 
.tooltiptext:hover { 
    display: none; 
} 
*/

或者更容易使用title屬性：

<button type="button" title="Tooltip text">Hover me</button>

來源

2017-10-20 21:13:30 Federico

我不想使用標題出於某種原因，如果您有多個按鈕相鄰，那麼如果您懸停，那麼工具提示將出現在其他按鈕的頂部，那麼用戶必須將按鈕遠離按鈕，希望您瞭解我需要的方法。但你對鉻和FF是正確的，它只是閃爍，但它做我所需要的。 – Hessam

：懸停在IE瀏覽器中不工作的按鈕範圍內

回答

相關問題