有点费劲啊，没有::before和::after的基础逻辑要很清楚才能实现

1、给每个缩略图设置不同的图片

提示：使用伪结构选择器:nth-of-type()，并且配合::after

2、给每个缩略图添加透明度蒙板效果

提示：使用伪类选择器::before给缩略图添加蒙板效果

3、鼠标悬浮在缩略图上时，修改缩略图上蒙板的透明度

提示：通过:hover和::before配合修改opacity的值为0

4、点击缩略图，切换背景图片

提示：通过目标选择器:target进行背景图片的切换

5、控制不是被点击图片的层级大小，让其不显示

提示：通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示

smile_again

2015-01-16

源自：十天精通CSS3 7-8

关注问题我要回答

1276

操作

收起

3 回答

华时朝明
2016-02-01

关于:before和:after的问题，以前我都不知道有这个东西。看了之后才知道原来都可以用after和before在原有的基础之上向前和向后插入对象。这个题目是一样的道理的呀！用after来插入缩略图并给出对于li的绝对定位，用before来添加一个形状和after一样大小的透明块，用绝对定位使其位置和after的位置一致以达到蒙版的效果，再通过hover来改变透明度。通过target来切换背景图。