Mvc ActionLink HighLight Color

时间:2015-08-12 01:44:09

标签: html css twitter-bootstrap

我在Navbar上的Actionlink Highlight颜色有问题。 我使用bootstrap进行样式设置,我在bootstrap.css文件中找到了类似的导航栏样式:

.navbar-custom {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-custom .navbar-brand {
  color: #ecf0f1;
}
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-custom .navbar-text {
  color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-custom .navbar-nav > li > .dropdown-menu {
  background-color: #e74c3c;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a {
  color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #e74c3c;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-custom .navbar-nav > .open > a, .navbar-custom .navbar-nav > .open > a:hover, .navbar-custom .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-custom .navbar-toggle {
  border-color: #c0392b;
}
.navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #ecf0f1;
}
.navbar-custom .navbar-link {
  color: #ecf0f1;

}
.navbar-custom .navbar-link:hover {
  color: #ffbbbc;
}

@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffbbbc;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

CSHTML:

   <div class="navbar-custom container">
        <div class="container">
            <div class=" navbar-header">
                <button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("FluffyMunchies", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                    <li>@Html.ActionLink("Ana Sayfa", "Index", "Home")</li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            Ürünler <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="Products">
                            <li>@Html.ActionLink("Cupcakes", "CupCakes", "Home")</li>
                            <li>@Html.ActionLink("Özel Günler", "SpecialDays", "Home")</li>
                            <li>@Html.ActionLink("Paket Seçenekleri", "Packages", "Home")</li>
                        </ul>
                    </li>
                    <li>@Html.ActionLink("Hakkında", "About", "Home")</li>
                    <li>@Html.ActionLink("İletişim", "Contact", "Home")</li>


                </ul>

                <div class="navbar-right pSet">
                    <a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/fluffymunchiescupcakes" target="_blank">
                        <i class="fa fa-facebook"></i>
                    </a>
                    <a class="btn btn-social-icon btn-instagram" href="https://instagram.com/fluffymunchies" target="_blank">
                        <i class="fa fa-instagram"></i>
                    </a>
                </div>

                @Html.Partial("_LoginPartial")
            </div>

        </div>
    </div>

因此; ActionLinks高亮颜色为灰色。但;它应该是红色的。 问题是什么? 我的参考网站是:http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0

0 个答案:

没有答案