原因：简单。
简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验。
一，导航高亮
效果图：
代码：
<!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><html lang="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
原文地址：https://www.cnblogs.com/iceflorence/p/9015664.html