:hover in span in button 在 IE 中不起作用
[英]:hover on span in button not working in IE
問題描述
CSS 不適用於 Internet Explorer 中的按鈕標簽內的 span 標簽懸停，我有按鈕，如果您將鼠標懸停在它上面，它將顯示工具提示，我希望如果您懸停工具提示，它應該消失，它在 FF 和 chrome 中工作但不是 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。 謝謝。
2 個解決方案
解決方案1
1 2017-10-20 21:13:30
據我所知，你在做什么是錯誤的：
“工具提示文本”是“工具提示”的子元素...
..所以當你懸停“工具提示文本”時，你也懸停在“工具提示”上。 事實上，它也不適用於 Chrome。 它只是閃爍。
當您將鼠標懸停在“工具提示”上時，您應該只顯示“工具提示文本”，並在您離開它時隱藏它。
通過刪除這個：
/*
.tooltiptext:hover {
display: none;
}
*/
或者更容易使用 title 屬性：
<button type="button" title="Tooltip text">Hover me</button>
解決方案2
0 2017-10-20 21:06:24
好的，我花了一些時間來習慣 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 部分以調整工具提示文本的可見性。 使用此方法，您可以安全地將其移除。 另請注意，我的 jQuery 實現有點混亂，因為我忽略了將懸停效果放在函數中。 這個片段只是試圖顯示答案。 祝你好運。
懸停在IE中無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.