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.
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.
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.
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.