2

我有一个带有品牌元素的导航栏顶部的 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？我会尝试将 a 颜色指定为透明的，看看是否有区别。可能使用：

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

对不起，如果它不正确，我绝不是 CSS 专家。

于 2013-04-22T23:49:21.103 回答
0

我建议创建一个样式表文件来覆盖brand该类。在Bootstrap 的文档中，您可以找到所有类的默认值。

于 2013-04-22T23:47:49.943 回答