2

Zurb Foundation 4:ホバー時にトップバーセクションの背景色を変更するには?

この方法は機能しません:

.top-bar-section li a:hover:not(.button) {
    background: #222222;
  }

この方法は機能しません:

.top-bar-section .button :hover {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
}

この方法は機能しません:

/* Main Item selector */
.top-bar-section li a:hover {
    color: #fff;
    background-color: #2ba6cb;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out; }

/* Dropdown Item selector */
.top-bar-section li li a:hover {
    color: #2ba6cb;
    background-color: #fff;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out; }

このメソッドはフォントの色に対してのみ機能しますが、背景色は変更しません。

.top-bar-section ul li:hover > a {
    color: #7ADAE8; 
    background: rgba(0,0,0,0);
}

これが私のトップバーコードです。これはかなりシンプルで簡単です。

    <div class="sticky">
        <nav class="top-bar">
            <ul class="title-area">
                <li class="name"><a href="#"></a></li>
            </ul>
            <section class="top-bar-section">
                <ul class="left">
                    <li><a href="#">home</a></li>
                    <li class="divider"></li>
                    <li><a href="#">food</a></li>
                    <li class="divider"></li>
                    <li><a href="#">drink</a></li>
                    <li class="divider"></li>
                    <li><a href="#">gallery</a></li>
                    <li class="divider"></li>
                    <li><a href="#">location</a></li>
                    <li class="divider"></li>
                    <li><a href="#">blog</a></li>
                </ul>
            </section>
        </nav>
    </div>

私はこれに 2 日間を費やし、foundation.css を何度も掘り下げました。何か案は？

私のstyle.cssファイル：

body {
    background-image:url("../img/homepage-bkg-img.jpg");
    /*background: #FFFFFF;*/
    font-family: 'Advent Pro', san-serif;
    font-weight: 500;
    font-size: 20px;
}

.hero-text {
    font-family: 'Dorsa', san-serif;
    font-size: 275px;
    color: #FFF;
    line-height:80%;
}

.nav-menu-text {
    font-family: 'Wire One', san-serif;
    font-size: 30px;
    color: #FFF;
}

.scrollblock {
    margin: 0;
    width: 100%;
    height: 45px;
}

/* CENTERING TOP NAV */
section.top-bar-section {
    float: left;
    left: 50% !important;
    position: relative;
}

section.top-bar-section ul.left {
    position: relative;
    right: 50%;
}

.top-bar:not(.expanded) {
    section.top-bar-section {
        float: right;
        left: 50% !important;
        position: relative;
        ul.left {
            position: relative;
            right: 50%;
        }
    }
}

/* TOP BAR */
.top-bar {
    overflow: hidden;
    height: 45px;
    line-height: 45px;
    position: relative;
    background: rgba(0,0,0,0);
    margin-bottom: 0;
    /*
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0.33)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
    background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
    */
}

.top-bar-section ul {
    width: 100%;
    font-size: 16px;
    margin: 0; 
    background: rgba(0,0,0,.75);
    /*
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 49%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(49%,rgba(255,255,255,0.5)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); 
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); 
    */

    /* Graident Background *//*
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
    background: -o-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
    background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
    */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.top-bar-section li a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      background: rgba(122,218,232,0);
}

.top-bar-section ul li:hover > a {
    color: #7ADAE8; 
    background: rgba(0,0,0,0);
}

.top-bar-section ul li > a {
    color: #FFFFFF;
    background: rgba(0,0,0,0);
}

/* Main Item selector */
.top-bar-section li a:hover {
    color: #fff;
    background-color: #ff1199;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out; 
}

.top-bar-section li a:not(.button):hover {
    background:red;
}

/* Dropdown Item selector */
.top-bar-section li li a:hover {
    color: #ff4466;
    background-color: #fff;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out; 
}

/* Food & Drink Menu Header */
fieldset {
  border: solid 1px #dddddd;
  padding: 1.25em;
  margin: 1.125em 0; }
  fieldset legend {
    font-weight: bold;
    color: #FFF;
    font-size: 24px;
    background: rgba(0,0,0,0);
    padding: 0 0.1875em;
    margin: 0;
    margin-left: -0.1875em; }

/* Food & Drink Menu Active Section Background */
.section-container.auto > section.active > .title, .section-container.auto > .section.active > .title,
    .section-container.vertical-tabs > section.active > .title,
    .section-container.vertical-tabs > .section.active > .title,
    .section-container.vertical-nav > section.active > .title,
    .section-container.vertical-nav > .section.active > .title,
    .section-container.horizontal-nav > section.active > .title,
    .section-container.horizontal-nav > .section.active > .title,
    .section-container.accordion > section.active > .title,
    .section-container.accordion > .section.active > .title {
        background: #6EFF57; }

/* Food & Drink Menu Active Section */  
.section-container.auto > section.active > .title a, .section-container.auto > .section.active > .title a,
    .section-container.vertical-tabs > section.active > .title a,
    .section-container.vertical-tabs > .section.active > .title a,
    .section-container.vertical-nav > section.active > .title a,
    .section-container.vertical-nav > .section.active > .title a,
    .section-container.horizontal-nav > section.active > .title a,
    .section-container.horizontal-nav > .section.active > .title a,
    .section-container.accordion > section.active > .title a,
    .section-container.accordion > .section.active > .title a {
        font-size: 30px;
        font-weight: bold;
        line-height:80%;
        color: #FFF; }

/* Food & Drink Menu Default Background */  
.section-container.accordion {
  border-top: 0px solid #cccccc; }
  .section-container.auto > section > .title, .section-container.auto > .section > .title,
  .section-container.vertical-tabs > section > .title,
  .section-container.vertical-tabs > .section > .title,
  .section-container.vertical-nav > section > .title,
  .section-container.vertical-nav > .section > .title,
  .section-container.horizontal-nav > section > .title,
  .section-container.horizontal-nav > .section > .title,
  .section-container.accordion > section > .title,
  .section-container.accordion > .section > .title {
    background-color: #7ADAE8;
    cursor: pointer;
    border: solid 0px rgba(0,0,0,.5); }

/* Food & Drink Menu Hover Background */    
.section-container.auto > section > .title:hover, .section-container.auto > .section > .title:hover,
    .section-container.vertical-tabs > section > .title:hover,
    .section-container.vertical-tabs > .section > .title:hover,
    .section-container.vertical-nav > section > .title:hover,
    .section-container.vertical-nav > .section > .title:hover,
    .section-container.horizontal-nav > section > .title:hover,
    .section-container.horizontal-nav > .section > .title:hover,
    .section-container.accordion > section > .title:hover,
    .section-container.accordion > .section > .title:hover {
      background-color: #87efff; }

/* Food & Drink Menu Description Background */  
.section-container.auto > section > .content, .section-container.auto > .section > .content,
  .section-container.vertical-tabs > section > .content,
  .section-container.vertical-tabs > .section > .content,
  .section-container.vertical-nav > section > .content,
  .section-container.vertical-nav > .section > .content,
  .section-container.horizontal-nav > section > .content,
  .section-container.horizontal-nav > .section > .content,
  .section-container.accordion > section > .content,
  .section-container.accordion > .section > .content {
    padding: 0.9375em;
    background-color: #FFF;
    border: solid 0px #cccccc; }

.price {
    font-size: 30px;
    font-weight: bold;
    line-height:10%;
    color: #000;;
}

/* DISABLE MOBILE TRANSFORM */
@media only screen and (min-width: 0em) {
  .top-bar {
    background: rgba(0,0,0,0);
    *zoom: 1;
    overflow: visible; }
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
    .top-bar:after {
      clear: both; }
    .top-bar .toggle-topbar {
      display: none; }
    .top-bar .title-area {
      float: left; }
    .top-bar .name h1 a {
      width: auto; }
    .top-bar input,
    .top-bar .button {
      line-height: 2em;
      font-size: 0.875em;
      height: 2em;
      padding: 0 10px;
      position: relative;
      top: 8px; }
    .top-bar.expanded {
      background: rgba(0,0,0,0); }

  .contain-to-grid .top-bar {
    max-width: 62.5em;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    -webkit-transition: none 0 0;
    -moz-transition: none 0 0;
    transition: none 0 0;
    left: 0 !important; }
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      .top-bar-section ul li {
        float: left; }
        .top-bar-section ul li .js-generated {
          display: none; }
    .top-bar-section li.hover > a:not(.button) {
      background: black;
      color: white; }
    .top-bar-section li a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      background: rgba(0,0,0,0); }
      .top-bar-section li a:not(.button):hover {
        background: black; }
    .top-bar-section .has-dropdown > a {
      padding-right: 35px !important; }
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: 22.5px; }
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: none; }
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block; }
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1em;
      margin-top: -7px;
      right: 5px; }
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 7px 15px;
        background: #1e1e1e; }
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #1e1e1e; }
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #2b2b2b;
      border-left: solid 1px black;
      clear: none;
      height: 45px;
      width: 0; }
    .top-bar-section .has-form {
      background: #111111;
      padding: 0 15px;
      height: 45px; }
    .top-bar-section ul.right li .dropdown {
      left: auto;
      right: 0; }
      .top-bar-section ul.right li .dropdown li .dropdown {
        right: 100%; }

  .no-js .top-bar-section ul li:hover > a {
    background: black;
    color: white; }
  .no-js .top-bar-section ul li:active > a {
    background: #090909;
    color: white; }
  .no-js .top-bar-section .has-dropdown:hover > .dropdown {
    display: block; } }

/* Panels */
.panel {
    border-style: solid;
    border-width: 1px;
    border-color: #d9d9d9;
    margin-bottom: 1.25em;
    padding: 1.25em;
    background: rgba(0,0,0,0.33);
 }

.panel-header-text-color {
    font-family: 'Smythe', cursive;
    color: #FFF;
    font-size: 48px;
    line-height:80%;
}

.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
    color: #CCC;
}
4

3 に答える 3

2

Foundation のトップバーの色を変更するための完全なチート シートを次に示します (!important; が必要であることに注意してください。そうしないと機能しません:

.top-bar {
    background: red;
}

.top-bar-section li a:not(.button) {
    background: blue !important;   
}

.top-bar-section li a:not(.button):hover {
    background: green !important;   
}

.top-bar-section ul li.active > a {
    background: gray !important;   
}

.top-bar-section ul li.active > a:hover {
    background: yellow !important;   
}
于 2014-07-13T16:57:19.223 に答える
1

うーん、そうすべきです。作ってみてください

.top-bar-section li a:not(.button):hover {
    background:red !important; /*example */
}
于 2013-10-15T14:37:17.033 に答える
0

あなたは正しい考えを持っていますが、わずかに間違った順序で.

以下のセレクターはあなたが探しているものです

.top-bar-section li a:not(.button):hover {
        background:red; /*example */
}

それでもうまくいかない場合は、関連する他のすべてのセレクターの後にあることを確認してください。

于 2013-09-27T12:56:46.320 に答える