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