html - Overriding style in CSS? -
jsfiddle here http://jsfiddle.net/s3king93/txuld/
trying style individual class .home1 have same grey background a:hover. reason style won't override, when use !important. if take away a:hover part background shows text doesn't.
anybody have ideas?
<div class="list-1"> <ul class="list-style-1"> <li><a class="home1" href="">home</a></li> <li><a href="">influences</a></li> <li><a href="">about me</a></li> <li><a href="">classes</a></li> <li><a href="">andrews video blog</a></li> <li><a href="">photography</a></li> </ul> </div> .list-1 { padding:none; float: right; clear:right; padding-right: 27px ; } .list-style-1 { padding-top: 26px; list-style-type: none; font-family: "bell gothic std light"; font-size: 20px; } { display: inline-block; width: 100%; text-decoration: none; padding: 1px; } a:link { text-decoration:none; color: #2a2a2a; } a:visited { text-decoration:none; color: #2a2a2a; } a:hover { text-decoration:none; color: #69e0f6; background: #2a2a2a; } a:active { text-decoration:none; color: #69e0f6; background: #2a2a2a; } .home1 a:link { text-decoration:none; color: #69e0f6; background: #2a2a2a; }
you want:
a.home1 { text-decoration:none; color: #69e0f6; background: #2a2a2a; }
Comments
Post a Comment