CODEWITHSUNDEEP
htmlcsshoverpseudo-class
DumbDevGirl42069
DumbDevGirl42069

Reputation: 959

Stop hover effect on an anchor tag within a <div> with a class using CSS

All the links on my page have text-decoration: underline when hovered but I am trying to select anchor tags in my div with a class of logo and give it a text-decoration: none; So essentially I want all links on my page to be underlined when hovered except for the .logo Is there something I'm missing here with selecting pseudo classes? Or something else entirely. Could you also please take the time to briefly explain why ".logo a:hover { text-decoration: none;}" doesn't work.

Thank you in advance 

<header>
    <div class="wrapper">
        <div class="logo">
    <h3><a href="#heroSection">My Name</a></h3>
        </div>
        <ul>
            <li><a href="#aboutSection">About</a></li>
            <li><a href="#websitesSection">Websites</a></li>
            <li><a href="#projectsSection">Projects</a></li>
            <li><a href="#contactSection">Contact</a></li>
            <li><a href="#resumeSection">Resume</a></li>
        </ul>
    </div>
</header>

The CSS is as follows

a:link{
    color: #000;
    text-decoration: none;
 }

a:visited{
    color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.logo a:hover {
    text-decoration: none;
}

Upvotes: 0

Views: 2130

Answers (1)

Really Nice Code
Really Nice Code

Reputation: 1334

I used the sample code you provided and it works as intended! You can try Empty Cache and Hard Reload then test it again.

To hard reload in google chrome you need to first be in developer mode (F12) then you simply right-click on the reload button and select Empty Cache and Hard Reload.

If your browser is caching your scripts then all of your updates may not be reflected on your test page in a timely manner.

Upvotes: 1

Related Questions