如何使CSS工具提示在原始项目上严格保持,而不是在新生成的工具提示上?

问题描述 投票:1回答:1

我只希望工具提示文本在用户严格悬停在原始元素上时保留,但默认情况下,如果用户将鼠标悬停在悬停生成的工具提示文本正文上,则不再悬停在原始元素上。那么,即使光标可能仍然悬停在工具提示文本上,一旦用户将光标移动到不再使用悬停样式的原始元素上,我怎么能(如果可能的话)使工具提示文本消失?

遗憾的是,我甚至无法想象要尝试改变这种行为的方法,因此我的代码与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>
css hover tooltip
1个回答
0
投票

我自己想通了!

我的解决方案是使用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>
© www.soinside.com 2019 - 2024. All rights reserved.