Question

我正在使用我的网站的Foundation框架，以下代码是我在HTML文件中关注的内容：

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">jDispatch</a></h1>
        </li>
        <li class="toggle-topbar menu-icon">
            <a href="#"><span>Menu</span></a>
        </li>
    </ul>

    <section class="top-bar-section">
        <ul class="right">
            <li class="has-dropdown">
                <a href="#">Menu</a>
                <ul class="dropdown">
                    <li><a href="#">Link one</a></li>
                    <li><a href="#">Link two</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

我想知道如何编辑下拉按钮本身（其中包含文本'Menu'）并编辑它的所有可能状态（非活动，悬停和点击）？

通过检查Foundation的实际网站上的代码（当然使用自己的框架），我已经能够分别使用以下CSS代码修改非活动状态和悬停状态：

/* inactive/not hovered or clicked */
.top-bar-section li:not(.has-form) a:not(.button) {
    background: yellow;
    color: blue;
}

/* hovered over */
.top-bar-section li:not(.has-form) a:not(.button):hover {
    background: green;
    color: yellow;
}

我认为.top-bar-section li:not(.has-form) a:not(.button):active {...}可以做到这一点，但事实并非如此。

编辑：另外如何更改下拉项目的font-family？使用.top-bar-section ul li > a {...}我可以使用color更改“菜单”按钮及其所有下拉项的文本颜色，但使用font-family只会更改“菜单”按钮的字体。 / p>

Answer 1

.top-bar-section li:not(.has-form) a:not(.button):active {...}会在点击时更改“菜单”的样式。

但是，如果“菜单”也链接到另一个页面，如果在加载新页面之前完全看到它们，您将只看到活动的样式一秒钟。

Check out the codepen demo here

.top-bar-section li:not(.has-form) a:not(.button):active {
   background-color: blue;
   color: white;
}

在非活动/悬停/活动状态下编辑特定元素

1 个答案: