有點費勁啊，沒有::before和::after的基礎(chǔ) 邏輯要很清楚才能實現(xiàn)
1、給每個縮略圖設(shè)置不同的圖片
提示：使用偽結(jié)構(gòu)選擇器:nth-of-type()，并且配合::after
2、給每個縮略圖添加透明度蒙板效果
提示：使用偽類選擇器::before給縮略圖添加蒙板效果
3、鼠標(biāo)懸浮在縮略圖上時，修改縮略圖上蒙板的透明度
提示：通過:hover和::before配合修改opacity的值為0
4、點擊縮略圖，切換背景圖片
提示：通過目標(biāo)選擇器:target進(jìn)行背景圖片的切換
5、控制不是被點擊圖片的層級大小，讓其不顯示
提示：通過“否定選擇器:not()”和“目標(biāo)選擇器:target”來控制不是被切換的背景圖像不顯示
2016-02-01
關(guān)于:before和:after的問題，以前我都不知道有這個東西?？戳酥蟛胖涝瓉矶伎梢杂胊fter和before在原有的基礎(chǔ)之上向前和向后插入對象。這個題目是一樣的道理的呀！用after來插入縮略圖并給出對于li的絕對定位，用before來添加一個形狀和after一樣大小的透明塊，用絕對定位使其位置和after的位置一致以達(dá)到蒙版的效果，再通過hover來改變透明度。通過target來切換背景圖。