CSS学习 01 利用鼠标悬停制造文本隐藏效果
练习两年半的工程师 2024-08-03 17:05:03 阅读 76
效果：
在正常状态下，剧透内容的背景色和文本颜色都是黑色，导致剧透内容看起来是隐藏的（黑色文本在黑色背景上不可见）。当鼠标悬停在剧透内容上时，背景色和文本颜色恢复为初始值，使得剧透内容可见。
如何实现以上展示的效果呢？
以下HTML代码包含三个帖子，每个帖子都有一个剧透部分。
<code><!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">code>
</head>
<body>
<div class="post">code>
<p>In the 1968 film Planet of the Apes, they find
<span class="spoiler">the ruins code>
of the Statue of Liberty. The Plant of the
Apes is Earth!</span>
</p>
</div>
<div class="post">code>
<p>Soylent Green
<span class="spoiler">is made of people!</span>code>
</p>
</div>
<div class="post">code>
<p>OMG I can't believe that Darth Vadar is
<span class="spoiler">Luke Skywalker's father!</span>code>
</p>
</div>
</body>
</html>
这些剧透部分被包含在 <span class="spoiler">code> 标签中。
:root {
--spoiler-color: #000;
}
p {
line-height: 1.5em;
}
.post {
background: #e8eaed;
padding: 1em;
border-radius: 1em;
margin-bottom: 1em;
}
.spoiler {
background: var(--spoiler-color);
color: var(--spoiler-color);
transition: all .5s ease-in;
}
.spoiler:hover {
background: initial;
color: initial;
}
全局变量定义：
:root：表示文档的根元素。定义了一个CSS变量--spoiler-color，值为#000（黑色）。
段落样式：
p：针对所有<p>标签。
line-height: 1.5em;：设置行高为1.5倍的字高。
剧透内容样式：
.spoiler：针对所有类名为spoiler的元素。
background: var(--spoiler-color);：背景色使用定义的变量--spoiler-color（黑色）。
color: var(--spoiler-color);：文本颜色使用同一个变量--spoiler-color（黑色），导致文本不可见。
transition: all .5s ease-in;：所有样式变化在0.5秒内以ease-in的效果过渡。
剧透内容的悬停效果：
.spoiler:hover：当鼠标悬停在类名为spoiler的元素上时。
background: initial;：背景色恢复为初始值（无背景色）。
color: initial;：文本颜色恢复为初始值（通常是默认颜色）。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。