whole page affected by hover effect

Question

As the title says, I got a hover effect for my links but the whole page is affected for some reason.

This is my style

a:hover, :visited, :active, :hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

https://jsfiddle.net/3qpbv5fo/

By the way, while you're at it. Is my code readable so far? would you get what I was doing if you had to continue building the website? Just for me to get better.

Answer 1

You're saying :hover among others with no element before it, so it refers to everything.

It's not sufficient to select the a element in the first selector only, if you put a comma between things, they get treated as completely separate selectors. So a:hover, :hover for example would be read as a:hover and *:hover.

See this for a guide on how to style links correctly.

Answer 2

Remove :hover because it is applying the effect to every possible element, ID and class on the page. Your a:hover is sufficient and will apply the effect on all hovered links.

Answer 3

you have to prefix :hover , :visited ... etc with a specific tag or it will effect the whole page.

do this instead

 a:hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

You can't have a:visited and a:active have the same CSS as your a:hover because it won't work right. You need to make a seperate block of CSS for these. a:hover will effect all your link elements, even the visited ones.

Answer 4

you use :hover 2 times in your css that mess up your code. you should omit last :hover in order to work your code correctly