为什么Bootstrap导航栏品牌悬停的行高不会改变？

Question

我使用Bootstrap制作导航栏然后，我决定将导航栏的行高增加50px。

当我添加：hover，所有链接＆＃39;悬停工作正常，除了仍然具有原始Bootstrap线高的导航栏品牌。

＆＃13;

＆＃13;

.navbar-brand,
.navbar-nav li a {
	line-height: 50px !important;
}

.navbar-brand:hover,
.navbar-nav li a:hover {
	background-color: #0ff !important;
}

.navbar-brand:hover{
	line-height: 50px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">WebSiteName</a>
			</div>
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Page 1</a></li>
				<li><a href="#">Page 2</a></li>
				<li><a href="#">Page 3</a></li>
			</ul>
		</div>
	</nav>

＆＃13;

＆＃13;

＆＃13;

请检查扩展代码段。