顯示與隱藏——仿土豆視訊
阿新 • • 發佈：2018-11-09
通過現實與隱藏，實現仿土豆視訊的做法，即當滑鼠經過圖片時顯示播放按鈕，程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> a{ display: block; /*轉換為塊級元素，才能設定高度和寬度*/ margin: 100px; width: 300px; height: 200px; position: relative; } .audio{ width: 300px; height: 200px; background:rgba(0,0,0,0.4) url(img/arr.png) no-repeat center; position: absolute; top: 0; left: 0; display: none;/*正常情況下不顯示*/ } a:hover .audio{/*滑鼠經過a時,.audio顯示出來*/ display: block; } </style> <body> <a href="#"> <img src="img/bg2.jpg" width="300px" height="200px"/> <div class="audio"></div> </a> </body> </html>
預設樣式：
滑鼠經過時樣式：
