1

我想在悬停效果时将导航栏链接的颜色更改为橙​​色。我试过这样做，但没有奏效。帮助，因为我是引导新手，我不知道如何在 twitter bootstrap 中正确添加我们自己的 css

<head runat="server">
<title>My Bootstraping </title>
<link href="content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<style type = "text/css">
a:hover
{
    background-color: Orange;
    }


</style>
<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>
</head>
<body>
 <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="Default.aspx">Home</a></li>
        <li><a href = "About.aspx" > About </a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</div>
</body>
</html>
4

3 回答 3

1

您的样式可能没有更高的“样式规则优先级”。

为了覆盖 twitter 引导程序a:hover，您需要在选择器中更加具体。这很可能足以覆盖 twitter 引导程序a:hover

.navbar .container .nav a:hover {
    background-color: orange;
}
于 2013-10-13T21:02:00.990 回答
0

如果您使用自定义 css 文件覆盖主引导 css，请将其添加到 css 文件中：

.navbar-inverse .nav > li > a:hover {
   color: orange;
 }

如果您只使用 bootstrap 附带的 css 文件，则在bootstrap.css中搜索 .navbar-inverse .nav > li > a:hover并更改color: xx; 的值；到上面的代码。

希望这会有所帮助

于 2013-10-13T20:53:43.260 回答
0

我希望这会奏效

HTML

<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="item"><a class="brand" href="#"><img src="images/ocutag-logo.png"></a></div>

            <div class="nav-collapse navbar-inverse-collapse collapse" style="height: 0px;">
                <ul class="nav span6">
                    <li class=""> <a href="documents/overview">Overview</a></li>
                    <li><a href="documents/api">API</a></li>
                    <li><a href="documents/authoring">Authoring</a></li>
                    <li> <a href="documents/pricing">Pricing</a></li>
                    <li> <a href="documents/news">News</a></li>

                </ul>






            </div><!-- /.nav-collapse -->
        </div>
    </div><!-- /navbar-inner -->
</div>

CSS

.navbar-inner:hover{background: #febf01; /* Old browsers */
background: -moz-linear-gradient(45deg, #febf01 0%, #febf01 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#febf01), color-stop(100%,#febf01)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #febf01 0%,#febf01 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #febf01 0%,#febf01 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #febf01 0%,#febf01 100%); /* IE10+ */
background: linear-gradient(45deg, #febf01 0%,#febf01 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#febf01',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
于 2013-10-13T21:11:04.530 回答