Search code examples
htmlcsshyperlinkhovervisited

whole page affected by hover effect

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.

Solution

  • 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.