1

How can I customize background-color while hovering <a href="#">Find Me</a>.
I want to change the background-color while I'm hovering.
this's the picture before I do hovering.

enter image description here

and this's the picture after I do hovering

enter image description here

I want to customize background-color at " Find Me "
what should I add to customize background color.

and this's my code

<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>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Aditya Rahadian
  • 73
  • 1
  • 13

1 Answers1

0

I believe the CSS you're looking for is: .top-bar-section li:not(.has-form) a:not(.button):hover

Working fiddle (make sure the screen is wide enough to see the second link).

You can always use your developer tools to inspect the element, and then modify it to see the pseudo-class states.

I'd also recommend learning how to modify the globals in your Foundation set up as it can save you a lot of time rather than always overwriting the Foundation standards.

Community
  • 1
  • 1
Pixelsmith
  • 261
  • 3
  • 11