How to keep word width after hover (font changes from light to bold on hover)?

Question

I've got some words like WORD and REALLYLONGWORD. Both have light font and I want them to become bold on mouse over. Both have float: left; width: auto; float: left; width: auto; . I can't give them fixed width.

The problem is when I hover WORD, the REALLYLONGWORD jumps to the right because WORD gets bolder font (and larger width value). Is there any CSS-only workaround to that?

EDIT (I can't answer my own question, so I'm posting answer below): I found some CSS-only solution. HTML:

<div class="thtitled-thtitle"><div class="thtitles-title">WORD</div><div class="thtitles-titlebold">WORD</div></div>
<div class="thtitled-thtitle"><div class="thtitles-title">REALLYLONGWORD</div><div class="thtitles-titlebold">REALLYLONGWORD</div></div>

CSS:

.thtitled-thtitle { float: left; }
.thtitles-titlebold { visibility: hidden; color: #F5F5F5; cursor: pointer; float: left; font-family: 'BOLDFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; } 
.thtitles-title { color: #F5F5F5; cursor: pointer; font-family: 'LIGHTFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; position: absolute; } 
.thtitles-title:hover { font-family: 'BOLDFONT',Arial,sans-serif; }

Basically, I create one more hidden container with BOLD font (its width is main width) and put LIGHT font inside. After hover it still has width of BOLD word so there is no jumping.

Answer 1

Use letter spacing. For example {letter-spacing:0.04em}

If you style your WORD with enough letter spacing to make it the same overall width as the same word when it is bold, and remove the letter spacing when it is bold, everything else will stay put.

It works - try this (this just demos the concept - not what I'm recommending for production):

<b>Rotterdam</b><br>
<span style="letter-spacing:0.04em">Rotterdam</span><br/>
<b>and</b><br>
<span style="letter-spacing:0.04em">and</span><br/>
<b>Oslo</b><br>
<span style="letter-spacing:0.04em">Oslo</span><br/>
<b>letter</b><br>
<span style="letter-spacing:0.04em">letter</span><br/>

Answer 2

You do not want to add any width to fonts at all, I suggest you delete the width property competely. (I also hope you noticed the writing error in your css, with should be width)

The next thing is assign a class to the the ahref this can be easily done with SPAN tags

once done in the css just do: .firstlinkclass{ font-weight: bold; }

Answer 3

I know this was asked a long long time ago, but I just came up with a solution to fix the jump that works well so I thought I'd share.

Instead of making the font bold on hover, make it have a text-shadow. No jump, same effect, one line of CSS.