Make text bigger on :hover without shifting nearby elements

[Rob in hood]

I want to make the text of a link bigger when the mouse hovers over it, but when I add a font-weight: bold; or font-size: 120%; then it makes all the text next to and above it jump around.

 

Any way to fix this?

[Andrea]

I haven't tried or researched it, but of the top of my head, try adding padding or border to your regular link and none to the one with the bigger font - you'll just have to play with how may pixel until things quit jumping.

 

Seems like it should work.....

[Rob in hood]

Ok, that's what I had hoped I wouldn't have to do

 

So fiddly and it'll break if a different font is used. I think I'll stick to just underlining and changing the colour.

 

Thanks!

[PicnicTutorials]

You would do this... You would need to wrap each anchor in a container (probably an li), and give the anchors container a fixed width and text-align center. That's it! That will keep it from affecting anything else around it.

Edited July 6, 2009 by Eric

[Rob in hood]

• 
  
• item 1
  
• item 2
  
• item 3
  

Edited July 6, 2009 by Rob in hood

[Wickham]

Inline elements like li don't have a width, so people often convert them to block;

 

but then they will follow the rules for a block element so you may have other adjustments to make, like using float: left; instead of display: inline.

 

li { display: block; float: left; width: ??px; }

Edited July 6, 2009 by Wickham

[PicnicTutorials]

Like this...

 

>

{ visibility: inherit; } Testing
<br /><!--<br />li {<br />float:left;<br />width:100px;<br />text-align:center;<br />}<br />a:hover{<br />font-size:120%;<br />}<br />--><br />



</pre>
<ul>
item 1
item 2
item 3
</ul>
<br><br

[Rob in hood]

Great! Thanks a lot everyone I've got quite a nice little homepage coming along thanks to the help here, so it's much appreciated.

[Wickham]

Note that Eric didn't include display: block; that's because when you style float: left it automatically converts the element to block; but of course you need to delete the display: inline or there will be a conflict (which he did).

 

I usually include display: block where I've deliberately changed an inline element, even though float does it for me, just so that I have a reminder there that I changed it.

[Rob in hood]

Note that Eric didn't include display: block; that's because when you style float: left it automatically converts the element to block; but of course you need to delete the display: inline or there will be a conflict (which he did).

 

I usually include display: block where I've deliberately changed an inline element, even though float does it for me, just so that I have a reminder there that I changed it.

 

Ah, good to know! I'm slowly learning those little intracacies like that