Overriding parent CSS attribute
I have this CSS:
a:hover {
background-color:#D1E1EA;
color:#19558D;
text-decoration:none;
}
for all links in my 开发者_如何学Capp. However, on one specific link I want to nullify all of this hover
behavior. How can I do this?
Note that it's not as simple as redefining these attributes for the specific link, because the color of the specific link changes, and so I couldn't just choose one background-color
...
I'm not completely sure what you mean by overwrite, but you can try setting the background color to transparent, so you're not specifying a specific colour.
a:hover.moreSpecific{
background-color: transparent;
}
I previously posted a comment saying you couldn't do this, but there's a :not()
selector in CSS 3 that could do this. It just won't work in IE < 9. I think you'd have to use JS to do it in IE.
a:hover:not(#specific_link) {
background-color:#D1E1EA;
color:#19558D;
text-decoration:none;
}
Most (all?) CSS properties allow you to inherit
from the parent element:
a:hover.special {
background: transparent;
color: inherit;
text-decoration: inherit;
}
精彩评论