HTML中的块悬停效果.ActionLink

时间:2017-09-02 22:52:02

标签: css razor

我的导航栏看起来像我想要的方式,但现在我想要它,所以当用户将鼠标悬停在其上时,该块会亮起。我可以让块可点击但不改变颜色:

这是我的观看代码:

@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" >

0 个答案:

没有答案