如何使CSS工具提示在原始项目上严格保持，而不是在新生成的工具提示上？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使CSS工具提示在原始项目上严格保持，而不是在新生成的工具提示上？相关的知识，希望对你有一定的参考价值。
我只希望工具提示文本在用户严格悬停在原始元素上时保留，但默认情况下，如果用户将鼠标悬停在悬停生成的工具提示文本正文上，则不再悬停在原始元素上。那么，即使光标可能仍然悬停在工具提示文本上，一旦用户将光标移动到不再使用悬停样式的原始元素上，我怎么能（如果可能的话）使工具提示文本消失？
遗憾的是，我甚至无法想象要尝试改变这种行为的方法，因此我的代码与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工具提示在原始项目上严格保持，而不是在新生成的工具提示上？的主要内容，如果未能解决你的问题，请参考以下文章
替换 HTML 页面上所有出现的子字符串而不使用 replaceAll 并将大小写保持为原始