Zurb Foundation 4：如何在悬停时更改顶栏部分的背景颜色？
Posted
技术标签:
【中文标题】Zurb Foundation 4：如何在悬停时更改顶栏部分的背景颜色？【英文标题】：Zurb Foundation 4: How to change color of background of top-bar-section on hover? 【发布时间】：2013-10-02 14:09:42 【问题描述】：此方法无效：
.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>
我花了整整两天的时间，一遍又一遍地挖掘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;
【问题讨论】：
【参考方案1】：这是在 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;
【讨论】：
【参考方案2】：嗯，应该的。试试看吧
.top-bar-section li a:not(.button):hover
background:red !important; /*example */
【讨论】：
【参考方案3】：你的想法是对的，只是顺序有点不对。
下面的选择器就是你要找的
.top-bar-section li a:not(.button):hover
background:red; /*example */
如果这仍然对您不起作用，请确保它位于所有其他相关选择器之后。
【讨论】：
您好，感谢您的回复。很遗憾，我无法让您的代码正常工作？以上是关于Zurb Foundation 4：如何在悬停时更改顶栏部分的背景颜色？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Zurb Foundation 4/5 全屏中制作行？
如何在我的 Rails 4 应用程序中配置 Compass 和 Zurb Foundation 5，以便它们都可以在同一个目录中访问？
用于小型和大型（流体/响应）列的 Zurb Foundation 4 SCSS 混合