1

ホバー効果でナビゲーションバーのリンクの色をオレンジ色に変更したい。この方法でやってみましたがうまくいきませんでした。ブートストラップが初めてで、Twitter ブートストラップに独自の 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

0

カスタム css ファイルを使用してメインのブートストラップ css をオーバーライドする場合は、これを css ファイルに追加します。

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

ブートストラップに付属の 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 に答える