2017-10-20 199 views
1

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使用。谢谢。

+0

哪个版本的IE浏览器导致的问题? – smekosh

+0

我正在测试IE 11 – Hessam

回答

0

好吧,花了我一点时间来习惯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实现有点麻烦,因为我忽略了将悬停效果放入函数中。这段代码只是试图显示答案。祝你好运。

+0

我觉得你不明白我的问题,你的代码不工作,我需要,如果你悬停的工具提示(我的意思是“tooltiptext”类,然后使其消失)不是按钮,$(' .tooltip')。鼠标操作在按钮上。否则我的代码工作之前,悬停按钮,然后悬停工具提示,它应该被隐藏,在IE浏览器不工作。 – Hessam

1

据我所知,你在做什么是错的:

了“的ToolTipText”是的“工具提示”的子元素...

..所以当你在徘徊“的ToolTipText”你也徘徊在“工具提示”。 事实上,它也不适用于Chrome。它只是闪烁。

当你将鼠标悬停在“工具提示”上时,你应该只显示“tooltiptext”,当你离开它时隐藏它。

通过删除如下:

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

或者更容易使用title属性:

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

我不想使用标题出于某种原因,如果您有多个按钮相邻,那么如果您悬停,那么工具提示将出现在其他按钮的顶部,那么用户必须将按钮远离按钮,希望您了解我需要的方法。但你对铬和FF是正确的,它只是闪烁,但它做我所需要的。 – Hessam

相关问题