仿土豆做法（display繼模式轉化後的第二個作用：顯示與隱藏）
阿新 • • 發佈：2018-11-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0px; padding: 0px; } a { width: 448px; height: 252px; display: block; margin: 100px; position: relative; } .mask { width: 100%; height: 100%; background: rgba(0,0,0,0.4) url("image/arr.png") no-repeat center; position: absolute; top: 0; left: 0; display: none; // mask盒子隱藏，但並非刪除 } a:hover .mask { // 滑鼠經過a然後a裡面的 mask 顯示出來，所以這裡使用後代選擇器（主要就是這句話，有個先來後到的順序，先經過盒子，msak再顯示出來） display: block; // mask盒子顯示 } </style> </head> <body> <a href="#"> <img src="image/tudou.jpg"> <div class="mask"></div> </a> </body> </html>
顯示：（滑鼠未點選）
顯示：（滑鼠點選）
