如何在悬停zurb-foundation 5时自定义下拉背景颜色

Question

如何在悬停<a href="#">Find Me</a>时自定义背景颜色 我想在我徘徊的时候改变背景颜色 这是我徘徊之前的照片。

这是我悬停后的照片

我想在“Find Me”中自定义背景颜色
我应该添加什么来自定义背景颜色。

这是我的代码

<nav style="width: 1000px; margin: auto;" class="top-bar" data-topbar role="navigation">
    <ul style="margin-right: 80px;" class="title-area">
        <li class="name">
            <h1><a href="#">My Site</a></h1>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
        <!-- Left Nav Section -->
        <ul class="left">
            <li class="has-dropdown">
                <a href="#">Find Me</a>
                <ul class="dropdown">
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Steamcommunity</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

Answer 1

我相信您正在寻找的CSS是：.top-bar-section li:not(.has-form) a:not(.button):hover

Working fiddle（确保屏幕宽度足以看到第二个链接）。

您始终可以使用开发人员工具检查元素，然后modify it to see the pseudo-class states。

我还建议学习如何修改基础设置中的全局变量，因为它可以为您节省大量时间，而不是总是覆盖基础标准。