能用HTML／CSS解決的問題，就不要用JS
阿新 • • 發佈：2018-05-09
如果 right 樣式 info 維護 clas abs 高亮 代碼
原因：簡單。
簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗。
一，導航高亮
效果圖：
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>home</title> <link rel="stylesheet" href="./style.css"> </head> <body class="home"> <ul> <li class="home"><a href="home.html">home</a></li> <li class="buy"><a href="buy.html">buy</a></li> <li class="sell"><a href="sell.html">sell</a></li> </ul> </body> </html>
<!DOCTYPE html> <htmllang="en"> <head> <meta charset="UTF-8"> <title>buy</title> <link rel="stylesheet" href="./style.css"> </head> <body class="buy"> <ul> <li class="home"><a href="home.html">home</a></li> <li class="buy"><a href="buy.html">buy</a></li> <li class="sell"><a href="sell.html">sell</a></li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sell</title> <link rel="stylesheet" href="./style.css"> </head> <body class="sell"> <ul> <li class="home"><a href="home.html">home</a></li> <li class="buy"><a href="buy.html">buy</a></li> <li class="sell"><a href="sell.html">sell</a></li> </ul> </body> </html>
ul { list-style: none; } ul li { float: left; margin-right: 30px; } a { color: #000; text-decoration: none; } /*正常態時，每個導航的默認樣式*/ ul li a { opacity: 0.5; } /*hover高亮實現*/ ul li a:hover { opacity: 1; border-bottom: 1px solid red; } /*選中當前頁面時，導航不透明度為1，另外加上下邊框*/ body.home ul li.home a, body.buy ul li.buy a, body.sell ul li.sell a { opacity: 1; border-bottom: 1px solid red; }
二，鼠標懸浮時顯示
實現方法：把隱藏的對象如子菜單，信息框作為hover目標的子元素或者相鄰元素
方法一，使用相鄰元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> /*menu正常狀態下是隱藏的*/ .menu { display: none; } /*導航hover時，顯示menu*/ .user:hover+.menu { display: list-item; } /*menu hover的時候，繼續顯示*/ .menu:hover { display: list-item; } /*如果menu和user之間有空隙，可以使用偽元素填充這個空隙，是menu hover的時候，依舊顯示*/ .menu:before { content: ‘‘; position: absolute; left: 0; top: -10px; width: 100%; height: 10px; } </style> </head> <body> <li class="user">用戶</li> <li class="menu"> <ul> <li>賬戶設置</li> <li>登出</li> </ul> </li> </body> </html>
方法二，使用子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container .menu { display: none; } .container:hover .menu { display: list-item; } </style> </head> <body> <ul class="container"> <li class="user">用戶</li> <li class="menu"> <ul> <li>賬戶設置</li> <li>登出</li> </ul> </li> </ul> </body> </html>
三，自定義radio/checkbox的樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> /*原生的選擇框隱藏*/ input[type=checkbox] { display: none; } /*未選中的checkbox的樣式*/ .checkbox { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #000; } /*利用:checked偽類實現自定義選中狀態樣式*/ input[type=checkbox]:checked+.checkbox { border: 1px solid red; background-color: yellow; } </style> </head> <body> <label for="check"> <input type="checkbox" id="check"> <span class="checkbox"></span> </label> </body> </html>
能用HTML／CSS解決的問題，就不要用JS