我的导航栏看起来像我想要的方式,但现在我想要它,所以当用户将鼠标悬停在其上时,该块会亮起。我可以让块可点击但不改变颜色:
这是我的观看代码:
@Html.ActionLink("Active Products", "MinimumProductInfoList", "MinimumProductInfo", new { area = "" }, new { @class = "navbar-brand minimum-inventory", Style = "color:White;" })
@Html.ActionLink("Inactive Products", "InactiveProductInfoList", "MinimumProductInfo", new { area = "" }, new { @class = "navbar-brand minimum-inventory", Style = "color:White;" })
这是我的css
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
.minimum-inventory li a:hover {
background-color: #000000
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
这是输出的html:
<div class="navbar-Atalanta navbar-fixed-top">
<div class="container col-md-8 col-lg-10 pull-left">
<div class="navbar-header">
<div class="left">
<img src="/Images/AtalantaLogo.png" id="logo" />
</div>
</div>
<a Style="color:White;" class="navbar-brand minimum-inventory" href="/MinimumProductInfo/MinimumProductInfoList">Active Products</a>
<a Style="color:White;" class="navbar-brand minimum-inventory" href="/MinimumProductInfo/InactiveProductInfoList">Inactive Products</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-2" >