【关于按钮的hover和focus状态 _hover 】

关于按钮的hover和focus状态
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
hover
详细描述
截图
代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/clearStyle.css">
	<title>demo</title>
	<style>
		nav.navbar { 
			min-height: 59px;
			background-color: #29b078;
		}
		button.navbar-toggle {
			margin-top: 10px;
			margin-bottom: 10px;
			border: none;
			background-color: #47D096;
		}
		.navbar-default .navbar-toggle:hover { background-color: #218C60; }
		.navbar-default .navbar-toggle:focus { background-color: #47D096; }
		.navbar-collapse {
			width: 100%;
			padding: 0;
			border: none;
		}
		.navbar-collapse ul.navbar-nav { margin: 0; }
		.navbar-collapse ul.navbar-nav li a {
			height: 40px;
			width: 100%;
			display: flex;
			color: #fff;
			font-size: 16px;
			border: none;
			background-color: #29b078;
		}
	</style>
</head>
<body>
	</header>
	<div class="navigate">
		<nav class="navbar navbar-default" role="navigation"> 
		    <div class="navbar-header">
		        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
		            <span class="sr-only">展开导航</span>
		            <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/menu.png"> 
		        </button>
		        <a class="navbar-brand" href="http://www.jnshu.com/"><div class="logo"></div></a>
		    </div>
		    <div class="collapse navbar-collapse" id="menu">
		        <ul class="nav navbar-nav">
		            <li class="active"><a href="#">首页</a></li>
		            <li><a href="#">职业</a></li>
		            <li><a href="#">推荐</a></li>
		            <li><a href="#">关于</a></li>
		        </ul>
		    </div>
		</nav>
	</div>
</body>
</html>
编辑于2024-11-20