Reputation: 7105
I had to use the !important
property for a hover style to take effect. The code below would not work without me including the !important
property. Why is that?
Non-working code
#sbw a.content_copy:link {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:visited {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:hover {
color: #ffffff;
background-color: #F12B63;
padding: 10px;
}
Working code
#sbw a.content_copy:link {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:visited {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:hover {
color: #ffffff !important;
background-color: #F12B63;
padding: 10px;
}
Upvotes: 0
Views: 83
Reputation: 8871
color: #ffffff !important;
this only ensures that on Hover color #ffffff
will always be applied.
for Example :-
p { color: red !important; }
p { color: blue; }
For the paragraph
color will always be red, irrespective of second line CSS.
Why to use !important
Suppose you are writing css for your page in which you added a style p { color: red ;}
on the first line but later on you again added p { color: blue;}
for same element, So
your first style will be gone and always second style will applied by browser.
So if you add !important
with your style it enforce browser to stick with that only.
Upvotes: 1
Reputation: 382514
The rules with :visited
and :link
may appear to be more specific.
You may do this :
#sbw a.content_copy:hover, #sbw a.content_copy:visited:hover, #sbw a.content_copy:link:hover {
color: #ffffff;
background-color: #F12B63;
padding: 10px;
}
Upvotes: 1