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

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -