2

ブランド要素を持つnavbar-topを備えたRailsアプリがあります。マウスオーバーすると、背面が黒くなります。ここで役立つブラウザコンソールには何も表示されません。誰もこれについて経験がありますか？外観は次のとおりです。

ここに画像の説明を入力

コンソールの検査要素部分に表示されるすべての CSS を次に示します。

media="all"
.navbar .brand {
float: left;
padding: 20px 5px 5px 0px;
margin-left: -20px;
font-size: 35px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0;
}
localhostmedia="all"
.navbar .brand {
float: left;
display: block;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
localhostmedia="all"
a:visited {
color: #666;
}
localhostmedia="all"
a {
color: #000;
}
localhostmedia="all"
a {
color: #0088cc;
text-decoration: none;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Inherited from div.navbar-inner
localhostmedia="all"
.navbar-inner {
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
}
Inherited from body.main
localhostmedia="all"
body {
color: #333;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
localhostmedia="all"
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
}
Inherited from html
localhostmedia="all"
html {
font-size: 100%;

ナビゲーション バーが含まれている部分的なビューを次に示します。

<div class="navbar navbar-top">
  <div class="navbar-inner">
    <div class="container-fluid">
     <a class="brand" href=<%= root_path %>>Visual Haggard (beta)</a>
        <ul class="nav">
          <li><a href= <%= illustrations_path %>>Illustrations</a></li>
          <li><a href= <%= novels_path %>>Novels</a></li>
          <% if current_user %>
            <li><a href= <%= editions_path %>>Editions</a></li>
          <% end %>
        </ul>

        <%= form_tag search_path, :method => 'get', :class => "form-search", :style => "height:24px;" do %>
          <div class="input-append" style="padding-top:5px;"> 
            <%= text_field_tag :search, params[:search], :class=>"span3 watermark search-query", :placeholder => "novel, illustration, or tag..."%>
            <button class="btn" type="submit"><i class="icon-search"></i></button>     
          </div>
        <% end %>                      
    </div> 
  </div>
</div>
4

2 に答える 2

2

ほとんどのブラウザー (少なくとも Mac の Safari と Chrome) には、右クリック時に [要素を検査] オプションがあります。そこから、特定の要素に適用されているすべての css スタイルを確認し、カスタム スタイルシートで上書きすることができます。ビューと CSS を投稿すると、より具体的な応答が可能になります。

css には次のビットがあります。

a {
color: #000;
}

おそらくオーバーライドされていますが、:hover? で優先されている可能性があります。色を透明に指定して、それが違いを生むかどうかを確認してみます。おそらく使用：

.navbar .brand:hover {
  color: transparent;
}

正しくない場合は申し訳ありませんが、私は決して CSS の専門家ではありません。

于 2013-04-22T23:49:21.103 に答える
0

brandクラスを上書きするスタイルシート ファイルを作成することをお勧めします。Bootstrap のドキュメントでは、すべてのクラスのデフォルトを見つけることができます。

于 2013-04-22T23:47:49.943 に答える