CSS学习 01 利用鼠标悬停制造文本隐藏效果

效果:
  • 在正常状态下,剧透内容的背景色和文本颜色都是黑色,导致剧透内容看起来是隐藏的(黑色文本在黑色背景上不可见)。
  • 当鼠标悬停在剧透内容上时,背景色和文本颜色恢复为初始值,使得剧透内容可见。


如何实现以上展示的效果呢?

以下HTML代码包含三个帖子,每个帖子都有一个剧透部分。

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 the
                    Apes 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"> 标签中。

css 复制代码
: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;
}
  1. 全局变量定义:

:root:表示文档的根元素。定义了一个CSS变量--spoiler-color,值为#000(黑色)。

  1. 段落样式:

p:针对所有<p>标签。
line-height: 1.5em;:设置行高为1.5倍的字高。

  1. 剧透内容样式:

.spoiler:针对所有类名为spoiler的元素。
background: var(--spoiler-color);:背景色使用定义的变量--spoiler-color(黑色)。
color: var(--spoiler-color);:文本颜色使用同一个变量--spoiler-color(黑色),导致文本不可见。
transition: all .5s ease-in;:所有样式变化在0.5秒内以ease-in的效果过渡。

  1. 剧透内容的悬停效果:

.spoiler:hover:当鼠标悬停在类名为spoiler的元素上时。
background: initial;:背景色恢复为初始值(无背景色)。
color: initial;:文本颜色恢复为初始值(通常是默认颜色)。

相关推荐
石金龙11 小时前
[译] Composition in CSS
前端·css
天天扭码12 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531712 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪20 小时前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy2 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
小帆聊前端2 天前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
谢尔登2 天前
【CSS】层叠上下文和z-index
前端·css
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html