有点费劲啊，没有::before和::after的基础 逻辑要很清楚才能实现
来源：7-8 切换背景图像综合练习题
smile_again
2015-01-16 14:08
1、给每个缩略图设置不同的图片
提示：使用伪结构选择器:nth-of-type()，并且配合::after
2、给每个缩略图添加透明度蒙板效果
提示：使用伪类选择器::before给缩略图添加蒙板效果
3、鼠标悬浮在缩略图上时，修改缩略图上蒙板的透明度
提示：通过:hover和::before配合修改opacity的值为0
4、点击缩略图，切换背景图片
提示：通过目标选择器:target进行背景图片的切换
5、控制不是被点击图片的层级大小，让其不显示
提示：通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示
写回答
关注
1回答
-
- 华时朝明
- 2016-02-01 11:24:28
关于:before和:after的问题，以前我都不知道有这个东西。看了之后才知道原来都可以用after和before在原有的基础之上向前和向后插入对象。这个题目是一样的道理的呀！用after来插入缩略图并给出对于li的绝对定位，用before来添加一个形状和after一样大小的透明块，用绝对定位使其位置和after的位置一致以达到蒙版的效果，再通过hover来改变透明度。通过target来切换背景图。
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242553 学习 · 2623 问题
相似问题
::before和::after
回答 1
before和after
回答 1
::after和::before
回答 2
基本能实现效果，有点小问题
回答 1
::before和::after层次问题
回答 1