CSS学习 01 利用鼠标悬停制造文本隐藏效果
效果:
- 在正常状态下,剧透内容的背景色和文本颜色都是黑色,导致剧透内容看起来是隐藏的(黑色文本在黑色背景上不可见)。
- 当鼠标悬停在剧透内容上时,背景色和文本颜色恢复为初始值,使得剧透内容可见。
如何实现以上展示的效果呢?
以下HTML代码包含三个帖子,每个帖子都有一个剧透部分。
<!doctype html>
<html><head><title></title><link rel="stylesheet" href="index.css"></head><body><div class="post"><p>In the 1968 film Planet of the Apes, they find <span class="spoiler">the ruins of the Statue of Liberty. The Plant of theApes is Earth!</span></p></div><div class="post"><p>Soylent Green <span class="spoiler">is made of people!</span></p></div><div class="post"><p>OMG I can't believe that Darth Vadar is <span class="spoiler">Luke Skywalker's father!</span></p></div></body>
</html>
这些剧透部分被包含在 <span class="spoiler">
标签中。
: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;
:文本颜色恢复为初始值(通常是默认颜色)。