Change class = "active" bg color

Question

Это своего рода вопрос из 2 частей, хотя я уверен, что ответ на один, скорее всего, прольет свет на второй, если не решит его.

Я использую фундамент 4 с рельсами 3.2.13 и работаю. Я изменил цвет фона на верхней панели, но ссылки, когда мышь заново все еще меняется на темно-серый, а также на одну ссылку, которая является активной ссылкой, то есть когда на главной странице ссылка «Главная» имеет атрибут 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'; 

Это мое глобальное приложение файл СКС 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

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

Пожалуйста, дайте мне знать, если вы хотите увидеть что-нибудь еще.

Answer 1

Поместите это к глобальной CSS для изменения фона верхнего бара Li активен:

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

Я попытался, свою работу.