html - Cannot change Background Color ONLY with CSS -
good morning,
i'm trying change background color on link when user hovers on it. current code, link color change expected, no change background color. if attach pseudo-class different tag, "span", works should. naturally suspect "a" tag blame, can't figure out @ all. been staring @ thing since last night. markup:
<div id="thumbaboutwrap"> <h4 class="contact">adam [at] layeredfeedback [dot] com</h4> <a class="contact" href="#"><h4>facebook</h4></a> <a class="contact" href="#"><h4>last.fm</h4></a> <a class="contact" href="#"><h4>linkedin</h4><a/> </div><!--thumbaboutwrap-->
css:
a.contact { font-size:50px; font-weight:800; } a.contact:hover { background-color:#000; color:#fff; }
i'm using meyer's reset if makes difference. far it's been problem-free.
the problem down <h4>
tags you've got inside <a>
tags. you're styling <a>
, not <h4>
.
two solutions:
firstly, remove <h4>
tags entirely. solve problem, , honest, <h4>
tags aren't necessary (you're setting font size on <a>
anyway).
alternatively, if want keep markup is, you'll need add h4
styles (particularly hover style), so:
a.contact:hover h4 { background-color:#000; color:#fff; }
hope helps.
[edit]
demonstration of difference makes add h4
hover selector can seen here: http://jsfiddle.net/c7ukp/
Comments
Post a Comment