如何在悬停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。

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