伪类实现的鼠标悬停效果,直接上代码:
HTML部分:
<!DOCTYPE html>
<html>
<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
<meta charset="utf-8">
<title>案例</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul>
<li>首页</li>
<li>学院</li>
<li>报名</li>
</ul>
</body>
</html>
CSS部分代码:
ul,
li {
padding: 0px;
margin: 0px;
list-style: none;
}
ul {
border: 1px solid #CCCCCC;
border-radius: 6px;
overflow: hidden;
display: inline-block;
}
ul::after {
content: '';
display: block;
clear: both;
}
ul>li {
float: left;
line-height: 60px;
padding: 0 15px;
}
ul>li:hover {
background: #0091ff;
color: #FFFFFF;
}
ul>li:active{
color:black;
} /*hover一定要在active之前,否则不会生效*/