CODEWITHSUNDEEP
htmlcss
Janice Barnhill
Janice Barnhill

Reputation: 1

Links aren't changing color when hovered over

Ok I have had these links set up for a while and decided to change the hover effect from using underline to a color change. I'm just not understanding why the color won't change. When I change the :hover text-decoration to underline it works but the color just says the normal link color I have set (#747474)

.footerList {
    display: inline;
    padding: 0 9px 0 9px;
}
.footerList a:link {
    text-decoration: none;
    color: #747474;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:visited {
    text-decoration: none;
    color: #747474;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:hover {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:active {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

<ul id="footerUlContainer">
<li class="footerList"><a href="privacy.php">Privacy Policy</a></li>
<li class="footerList"><a href="tos.php">Terms of Service</a></li>
<li class="footerList"><a href="tou.php">Terms of Use</a></li>
<li class="footerList"><a href="tou.php">Businesses</a></li>
</ul>

Upvotes: 0

Views: 83

Answers (1)

isJustMe
isJustMe

Reputation: 5470

Perhaps your style is being override somewhere else, I recommend use chrome dev tools, anyway try this:

    #footerUlContainer > .footerList a:hover {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

here is the working demo.

Aso check out this blog to get more familiar with specificity rules

Upvotes: 3

Related Questions