我正在为我的网站使用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>


我想知道如何编辑下拉按钮本身(带有文本“菜单”)并针对所有可能的状态(不活动,悬停并单击)进行编辑?

通过检查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仅更改“菜单”按钮的字体。

最佳答案

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

关于html - 编辑处于非事件/悬停/事件状态的特定元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31461669/

10-11 23:31
查看更多