Link Colors On Hover Don't Work After Visited

  • 1
  • Problem
  • Updated 7 years ago
  • Solved
So I changed the colors of the links in my navigation so they go blue when you mouse over them. But the problem is, after I've visited a page, they don't change colors when you mouse over them anymore. Anyone know why this would happen?
Photo of graphicanimator

graphicanimator

  • 6 Posts
  • 0 Reply Likes
  • frustrated

Posted 7 years ago

  • 1
Photo of graphicanimator

graphicanimator

  • 6 Posts
  • 0 Reply Likes
the site is at www.defendmycrime.com
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Graphicanimator,

This should not be happening.

I will look into this as your visit CSS might be set to white.

Thanks,
Shawn
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
I have noticed you have added this to your site:



<style>

#sys_banner{
width: 866px;
height: 300px;
padding: 0;
}

.sys_footer{
border-top-color: #666666;
border-top-width: 0px;
border-top-height: 0px;
}

#menu {
margin-top: -1px;
margin-left: -14px;
margin-right: -20px;
border-bottom: 0px solid #787878;
margin-bottom: 0px;
}

#menu ul {
float: left;
list-style: none outside none;
margin-left: 8px;
padding: 5px;
}

#menu ul li a {
font-size: 14px;
text-decoration: none;
}

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

a:hover{
color:#2922B2
}

a:visited{
color: #DAD4C9;
}

.sys_txt a:link {
color:#DAD4C9;
}
.sys_txt a:hover{
color:#2922B2
}

.sys_txt a:visited {
color:#DAD4C9;
}

body {
font-family: "Times New Roman";
font-size: 12px;
}

div.sys_yola_form {
border: 2px solid #222021;
padding: 5px;
}

h2 {
font-family: "times new roman";
font-size: 26px;
}

#content {
background: none repeat scroll 0 0 #DAD4C9;
margin-top:-11px;
-moz-border-radius: 0px 0px 15px 15px;
}

</style>



But then in the main CSS you have:



.sys_txt a:link {
text-decoration:underline;
color: #333333;
}
.sys_txt a:visited {
text-decoration:underline

}
.sys_txt a:hover {
text-decoration:underline
color: #000000;

}



and



a:link {
text-decoration: none;
color: #333333;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #000000;

}



Problems:

1. If you dont add a type to the style tag it will not work in certain browsers:
<style type="text/css"></style>

2. As you can see above You have defined the A tag 4 times in the CSS.
The best thing to do is use the Custom Site CSS feature if you have Yola Silver to replace the hover.

3. Because In this CSS:


.sys_txt a:visited {
text-decoration:underline

}


There is no color defined, that might be the main problem.

Try this CSS:



<style type="text/css">

#sys_banner{
width: 866px;
height: 300px;
padding: 0;
}

.sys_footer{
border-top-color: #666666;
border-top-width: 0px;
border-top-height: 0px;
}

#menu {
margin-top: -1px;
margin-left: -14px;
margin-right: -20px;
border-bottom: 0px solid #787878;
margin-bottom: 0px;
}

#menu ul {
float: left;
list-style: none outside none;
margin-left: 8px;
padding: 5px;
}

#menu ul li a {
font-size: 14px;
text-decoration: none;
}

.sys_txt a:link {
color:#DAD4C9;
}
.sys_txt a:hover{
color:#2922B2
}

.sys_txt a:visited {
color:#DAD4C9;
}

body {
font-family: "Times New Roman";
font-size: 12px;
}

div.sys_yola_form {
border: 2px solid #222021;
padding: 5px;
}

h2 {
font-family: "times new roman";
font-size: 26px;
}

#content {
background: none repeat scroll 0 0 #DAD4C9;
margin-top:-11px;
-moz-border-radius: 0px 0px 15px 15px;
}

</style>



It has to do with the CSS but Im not 100% clear why,
I tried my best :)
Sorry if I couldn't help

Thanks Shawn
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Also...
For the little side menu (The one with DUI in Utah) would you like a code that will make that way better looking. I will use custom CSS instead of using Javascript. These days a lot of people use CSS and I promise it will look better. :)
Photo of graphicanimator

graphicanimator

  • 6 Posts
  • 0 Reply Likes
yes i would definitely love a code that would look better please help!

Also, the visited link isn't the problem, i know that is working because before i added that, it would change to brown. So i know it's making it the light color after it's been visited... i just can't figure out why the hover blue color stops working after you've visited the page.

the yola rep i talked to was resetting something and i'm supposed to wait 24 hours to see if it worked so.... cross your fingers for me.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hello graphicanimator,

The problem is... in the CSS that you have added to the page you have the 'visited' declaration after the 'hover', this means the hover rule is being ignored (over ruled by the visited)

You have it like this...

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

a:hover{
color:#2922B2
}

a:visited{
color: #DAD4C9;
}

Switch it round so it looks like this...

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

a:visited{
color: #DAD4C9;
}

a:hover{
color:#2922B2;
}

That should do the trick :)

Lee.
http://hexham.info
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks guys for all your expert help on this thread!