Display狀態轉換效果演示
阿新 • • 發佈：2018-11-11
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Display演示</title> <style> div { width: 600px; } div a { width: 99px; height: 38px; color: #fff; background: #6CF; display:inline-block; text-align: center; text-decoration: none; margin-right: 1px; font-family: "微軟雅黑"; line-height: 38px; /* display顯示效果,inline行間,block塊狀*/ } div a:hover { background: #F90; } div .add{display:none;} div:hover .add{display:inline-block;} </style> </head> <body> <div> <a href="#">推薦網站</a><a href="#" class="add">新聞頭條</a><a href="#" class="add">電視劇</a><a href="#" class="add">最新電影</a><a href="#" class="add">小遊戲</a><a href="#" class="add">旅遊資訊</a> </div> </body> </html>