Colors ZURB基金会4：如何改变悬停顶部杆部的背景颜色？ PUR> ZURB基金会4：如何改变悬停状态下顶部杆部的背景颜色？< /P>

此方法不起作用：

.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 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 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>

---

你的想法是对的，只是顺序有点错误

下面的选择器就是您要查找的

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

---

如果这仍然不适用于您，请确保它在所有其他相关选择器之后。

嗯，应该是这样。试着去做吧

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

---

这是一个完整的备忘单，用来改变基础顶部的颜色（记住，重要的是，否则是不行的：

）

.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;   
}

---

您好，谢谢您的回复。很遗憾，我无法让您的代码正常工作？