CODEWITHSUNDEEP
htmlcss
jackcogdill
jackcogdill

Reputation: 5122

Links are not the right colors

I am creating a website and I am unsure of why the links on the page are not showing up as the right colors when hovered over. Here is one of the pages: http://jsfiddle.net/yentup/CR9TK/

The links I am worried about are the links in the content of the page. When hovered over, they are supposed to be red. However, they stay the same color. I am able to force the correct color using !important, but I would much rather avoid this because then all the other links I also have to use !important on to get their correct colors as well. Here is the bit of css that is conflicting, but you can find all the css for the entire page in the link mentioned above:

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

a:hover {
    color: #8B2323;
    text-decoration: underline;
}

#header ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Quintessential', serif;
    font-size: 24px;
    font-weight: bold;
    color: #909090;
    border-left: 1px dotted #d0d0d0;
    padding: 8px 14px;
}

#header ul li a:hover {
    color: #D2691E;
}

Upvotes: 0

Views: 70

Answers (1)

Marvin Rabe
Marvin Rabe

Reputation: 4241

Swap places of a:hover and a:visited .

a:visited {
    color: #787878;
}

a:hover {
    color: #8B2323;
    text-decoration: underline;
}

Should work then as expected.

Upvotes: 3

Related Questions