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