我只希望在用户严格将鼠标悬停在原始元素上时保留工具提示文本，但默认情况下，如果用户将鼠标悬停在悬停生成的工具提示文本正文上，它也会保留而不再悬停在原始元素上.那么，一旦用户将光标移动到不再具有悬停样式的原始元素上，即使光标可能仍悬停在工具提示文本上，我如何(如果可能)使工具提示文本消失？
遗憾的是，我什至无法想象如何尝试改变这种行为，所以我的代码与 w3schools 提供的关于如何制作/使用工具提示的代码完全相同(在所有相关方面)。代码在下面，或者您可以在此处访问他们的链接 - https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip
<style>
.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;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
最佳答案
我自己弄明白了!
我的解决方案是使用 JavaScript 而不是 CSS 来处理可见性样式，这样我就可以更好地控制有条件地呈现工具提示文本。 我也有点喜欢它，我的解决方案有点矫枉过正，因为我希望能够将此功能呈现给许多元素，尽管这里的示例只困扰一个 :)
这是代码!
strictHoverStyle();
function strictHoverStyle(){
let overTooltipTexts = false;
let tooltipSet = document.getElementsByClassName('tooltip');
let tooltiptextSet = document.getElementsByClassName('tooltiptext');
let tooltips = Array.from(tooltipSet);
let tooltiptexts = Array.from(tooltiptextSet);
for(let i = 0; i<tooltips.length; i++){
tooltips[i].addEventListener('mouseover', function(){
if(overTooltipTexts){
tooltiptexts[i].style.visibility = 'hidden';
tooltiptexts[i].style.opacity = 'opacity 1s';
tooltiptexts[i].style.transition = 0;
} else{
tooltiptexts[i].style.visibility = 'visible';
tooltiptexts[i].style.opacity = 1;
}
});
tooltips[i].addEventListener('mouseout', function(){
tooltiptexts[i].style.visibility = "hidden";
tooltiptexts[i].style.opacity = 0;
});
tooltiptexts[i].addEventListener('mouseover', function(){
overTooltipTexts = true;
});
tooltiptexts[i].addEventListener('mouseout', function(){
overTooltipTexts = false;
});
}
}* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Strict Hover</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>
<span class="tooltip">STRICT HOVER!<span class="tooltiptext">Tooltip text</span></span>
</h1>
</body>
<script src="index.js"></script>
</html>关于css - 如何使 CSS 工具提示在原始元素上严格保持不变，而不是在新生成的工具提示上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49665509/