：悬停在按钮的跨度上在 IE 中不起作用
Posted
技术标签:
【中文标题】：悬停在按钮的跨度上在 IE 中不起作用【英文标题】：:hover on span in button not working in IE 【发布时间】：2018-04-02 01:28:42 【问题描述】：CSS 不适用于跨度标签悬停，它位于 Internet Explorer 中的按钮标签内，我有一个按钮，如果你将鼠标悬停在它上面，它将显示工具提示，我希望如果你悬停工具提示它应该消失，它正在工作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。谢谢。
【问题讨论】：
哪个版本的 IE 导致问题？ 我正在通过 IE 11 进行测试 【参考方案1】：据我所知，您的做法是错误的：
“tooltiptext”是“tooltip”的子元素...
..因此，当您悬停“工具提示文本”时，您也将悬停在“工具提示”上。 事实上，它也不适用于 Chrome。它只是闪烁。
您应该只在悬停“工具提示”时显示“工具提示文本”，当您离开它时隐藏它。
删除这个：
/*
.tooltiptext:hover
display: none;
*/
或者更容易使用title属性：
<button type="button" title="Tooltip text">Hover me</button>
【讨论】：
出于某种原因，我不想使用标题从按钮中，希望您了解我需要处理的内容。但是您对 chrome 和 FF 的看法是正确的，它只是闪烁，但它可以满足我的需要。【参考方案2】：好吧，我花了一点时间来适应 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 实现有点混乱，因为我忽略了将悬停效果放在函数中。这个 sn-p 只是试图显示答案。祝你好运。
【讨论】：
我认为你没有理解我的问题，你的代码不起作用，如果你悬停工具提示（我的意思是“工具提示文本”类然后让它消失）而不是按钮，我需要 $('. tooltip').mouseout 动作在按钮上。否则我的代码之前工作过，悬停按钮，然后悬停工具提示，它应该被隐藏，在 IE 中它不起作用。以上是关于：悬停在按钮的跨度上在 IE 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章