jquery - Link Spacing Issue in CSS -
basically menu, on hover, separate image appear on both sides on link. got far can't seem rid of white spacing on link. there should no white space above link on hover. can't seem figure out i'm missing!?
<li><a href="#" class="button">button 1</a></li> <li><a href="#" class="button">button 2</a></li> <li><a href="#" class="button">button 3</a></li> $(document).ready(function(){ $(".button").hover(function() { $(this).before('<div class="buttonimgleft"></div>'); $(this).after('<div class="buttonimgright"></div>'); }, function() { $(".buttonimgleft, .buttonimgright").remove(); }); }); body { margin: 0; } li { list-style: none; display: inline-block; margin-right: 15px; } .buttonimgright { display: inline-block; background: #cc0000 url('insert-right-image.png'); width: 15px; height: 20px; } .buttonimgleft { display: inline-block; background: #cc0000 url('insert-left-image.png'); width: 15px; height: 20px; } { height: 20px; color: #000; background: #cc0000; font-size: 16px; }
here's fiddle: http://jsfiddle.net/vexg3/1/
add vertical-align:top;
links , image divs.
.buttonimgright { display: inline-block; background: #cc0000 url('insert-right-image.png'); width: 15px; height: 20px; vertical-align:top; } .buttonimgleft { display: inline-block; background: #cc0000 url('insert-left-image.png'); width: 15px; height: 20px; vertical-align:top; } { height: 20px; color: #000; background: #cc0000; font-size: 16px; vertical-align:top; }
Comments
Post a Comment