HTML+CSS導航欄滑鼠滑過字型轉換（英文變中文）
阿新 • • 發佈：2020-08-26
HTML程式碼：
<body> <div class="box"> <ul> <li><a href="#"><span>Home</span><p>首頁</p></a></li> <li><a href="#"><span>Blog</span><p>部落格</p></a></li> <li><a href="#"><span>guestbook</span><p>首頁</p></a></li> <li><a href="#"><span>Pinkbar</span><p>首頁</p></a></li> <li><a href="#"><span>fansir</span><p>首頁</p></a></li> </ul> </div> </body>
CSS程式碼：
<style> *{ margin: 0; padding: 0; } .box{ height: 20px; width: 600px; border-bottom: 8px solid #db511d; margin:0 auto; margin-top: 50px; } .box ul li{ float: left; list-style: none; margin-left: 1px; } .box ul li:first-child{ margin-left: 12px; } .box ul li a{ text-decoration: none; height: 20px; width: 80px; display: block; background-color: #dfdfdf; color:#5e5e5e; font-size: 12px; text-align: center; line-height: 20px; } .box ul li a:hover{ background-color: #db511d; color: #fff; } .box ul li a:hover span{ display: none; } .box ul li p{ display: none; } .box ul li a:hover p{ display: block; } </style>
原理：滑鼠滑過時給<span>新增display: none;屬性，讓p標籤新增display: block;顯示。