html CSS将文本混淆，直到将鼠标悬停在文本上。我从https://www.reddit.com/r/MumboJumboFanServer/得到了这个想法，其中使用了类似的CSS

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html CSS将文本混淆，直到将鼠标悬停在文本上。我从https://www.reddit.com/r/MumboJumboFanServer/得到了这个想法，其中使用了类似的CSS相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>

<html lang="en">
<head>
	
	<meta charset="UTF-8">
	
	<title>CSS to obfuscate text</title>
	
	<style>
		.spoiler:not(:hover), .spoiler:not(:hover) * {
			color:transparent !important;
		}
		.spoiler:not(:hover) {
			text-shadow:0 0 12px #4D5763;
		}
		.spoiler {
			transition:color 0.25s ease, text-shadow 0.25s ease;
		}
		.spoiler * {
			transition:color 0.25s ease;
		}
	</style>
	
</head>
<body>
	
	<span class="spoiler">This awesome <span style="color:red;">spoiler</span> has a <a href="#">link</a>!</span>
	
</body>
</html>

以上是关于html CSS将文本混淆，直到将鼠标悬停在文本上。我从https://www.reddit.com/r/MumboJumboFanServer/得到了这个想法，其中使用了类似的CSS的主要内容，如果未能解决你的问题，请参考以下文章

将鼠标悬停在图像上时需要 CSS 效果，以获取另一个图像和/或文本以显示在其上方

悬停时如何使用 CSS 将角度字符添加到此按钮的文本中？

在鼠标悬停时将文本悬停在帖子图像上

Python 3 - 主线程未检测到后台线程中的KeyboardInterrupt，直到用户将鼠标悬停在GUI窗口上

仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画

CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接