更改 class="active" bg 颜色

Question

这是一个由两部分组成的问题，尽管我相信如果不能解决第二个问题，我相信其中一个问题的答案很可能会阐明第二个问题。

我正在使用带有 rails 3.2.13 的基础 4 并让它工作。我更改了顶栏的背景颜色，但是鼠标悬停时的链接仍然变为深灰色以及作为活动链接的一个链接，即当主页上的“主页”链接具有class="active" 属性时在 li 元素标签中也仍然是深灰色，而不是我的导航栏背景颜色的较暗版本。我尝试将自己的.active { background-color: #f00; } 添加到我的全局css 文件中，它会更改我在页面内容区域中拥有的h1 元素，但不会更改导航栏中的链接。我已经编辑了 $top-bar 和 $section（因为链接实际上包含在一个部分 div 中）变量，但没有变化。

对于我的生活，我似乎无法更改活动或悬停的背景颜色。我确信我错过了一些非常简单但似乎无法追踪的东西。

您能提供的任何帮助都会很棒。 谢谢， 帕特里克

这是一些相关的代码...

foundation_and_overrides.scss
...
//
// Section Variables
//

// We use these to set padding and hover factor
 $section-padding: emCalc(15px);
 $section-function-factor: 10%;

// These style the titles
$section-title-color: #333;
$section-title-bg: #eee;
$section-title-bg-active: darken($section-title-bg, $section-function-factor);
$section-title-bg-active-tabs: #fff;

// Want to control border size, here ya go!
 $section-border-size: 1px;
 $section-border-style: solid;
 $section-border-color: #ccc;

// Control the color of the background and some size options
 $section-content-bg: #fff;
 $section-vertical-nav-min-width: emCalc(200px);
 $section-bottom-margin: emCalc(20px);

...

//
// Top Bar Variables
//

// Background color for the top bar
// $topbar-bg: #111;
$topbar-bg: #008000;

// Height and margin
// $topbar-height: 45px;
$topbar-height: 75px;
// $topbar-margin-bottom: emCalc(30px);

// Control Input height for top bar
// $topbar-input-height: 2.45em;

// Controlling the styles for the title in the top bar
// $topbar-title-weight: bold;
// $topbar-title-font-size: emCalc(17px);
$topbar-title-font-size: emCalc(28px);

// Set the link colors and styles for top-level nav
// $topbar-link-color: #fff;
// $topbar-link-weight: bold;
// $topbar-link-font-size: emCalc(13px);
$topbar-link-font-size: emCalc(18px);

/* copied from website */

$topbar-link-color: #eee;
$topbar-link-color-hover: #00f;
$topbar-link-color-active: #0f0;
$topbar-link-weight: bold;
$topbar-link-font-size: emCalc(18px);
$topbar-link-hover-lightness: -30%; /* Darken by 30% */
$topbar-link-bg-hover: darken($topbar-bg, 3%);
$topbar-link-bg-active: darken($topbar-bg, 3%);

/* =================== */

// Style the top bar dropdown elements
// $topbar-dropdown-bg: #333;
// $topbar-dropdown-link-color: #fff;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: #fff;
// $topbar-dropdown-toggle-alpha: 0.5;
// $dropdown-label-color: #555;

// Top menu icon styles
// $topbar-menu-link-transform: uppercase;
// $topbar-menu-link-font-size: emCalc(13px);
// $topbar-menu-link-weight: bold;
// $topbar-menu-link-color: #fff;
// $topbar-menu-icon-color: #fff;
// $topbar-menu-link-color-toggled: #888;
// $topbar-menu-icon-color-toggled: #888;

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width "#{$topbar-breakpoint}")";

@import 'foundation';

这是我的全局应用 scss 文件 app_styles.scss @import '基础';

#error_explanation {
    @include alert;

    width: 450px;
    border: 2px solid #c00;
    padding: 7px;
    padding-bottom: 0;
    margin-bottom: 20px;
    background-color: #e4d2d2;
    h2 {
        text-align: left;
        font-weight: bold;
        padding: 5px 5px 5px 15px;
        font-size: 1em;
        margin: -7px;
        margin-bottom: 0px;
        background-color: #c00;
        color: #fff;
    }
    ul li {
        color: #c00;
        margin: 5px 5px -10px 15px;
        font-size: 12px;
        list-style: square;
    }
}

.active {
    background-color: #f00;
}

这是我的应用程序布局文件中的导航栏

<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><%= link_to "Checkbook", root_url %></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Left Nav Section -->
    <ul class="left">
        <%= render "nav_bar" %>
    </ul>

    <!-- Right Nav Section -->
    <ul class="right">
        <% if current_user %>
            <li><%= link_to "Welcome back " + current_user.display_name, current_user %></li>
            <li class="divider"></li> 
            <li><%= link_to "Log Out", log_out_path %></li>
        <% else %>
            <li><%= link_to "Log in", log_in_path %></li>
            <li class="divider"></li> 
            <li><%= link_to "Sign up", new_user_url %></li>
        <% end %>
    </ul>
  </section>
</nav>

这是主页链接

<li class="active"></li>
<% if current_user and current_user.is_admin? %>
    <li class="divider"></li>
    <li><%= link_to "Users", users_path %></li>
<% end %>
<% if current_user %>
    <li class="divider"></li>
    <li><%= link_to "Portfolios", portfolios_path %></li>
<% end %>

这是我提到的使用 h1 元素中的 class="active" 更改的内容

<div class="active">
    <h1 class="">Welcome...</h1>
</div>

如果您还想看其他内容，请告诉我。

Answer 1

把这个放到你的全局 css 中以改变背景顶栏 li active :

.top-bar-section ul li.active > a {
  background: #0f0;
}

我试过了，它的工作。