CSS hover state - prevent shakiness of other elements

Question

When one of the links is hovered, rest of the elements slightly move to left coz of the change in font-weight on the hovered link.

This is what I tried

HTML

<div id="footer"> &copy; GreatService <a href="">Terms</a>&middot;<a href="">Privacy</a>&middot;<a href="">Legal</a>&middot;<a href="">Company</a>&middot;<a href="">Media</a>&middot;<a href="">Technology</a>&middot;<a href="">FAQ</a> &middot; Made with <span>&hearts;</span>. Enjoy!</div>

CSS

    #footer {
      position: absolute;
      bottom: 20px;}

    #footer, #footer a {
      color: #fff;}

    #footer a {
      margin-left: 5px;margin-right:5px;text-decoration: none;padding-left: 3px;padding-right: 3px;
    }
    #footer a:hover {
      font-weight: 700;

    }
    #footer a:hover a{padding-left: 2px; }

    #footer span {
      color: red;}

Any way to prevent shakiness of the other elements, so it looks as if the hovered link is being emphasized in its own place without causing any disturbance to the position of the other non-hovered links?

http://jsfiddle.net/sjeojvos/

possible duplicate of [Horiz CSS menu - text shifting on bold hover](http://stackoverflow.com/questions/556153/horiz-css-menu-text-shifting-on-bold-hover) — Robby Cornelissen, Aug 15 '14 at 09:57
Lot of useful answers in [this question](http://stackoverflow.com/questions/556153/horiz-css-menu-text-shifting-on-bold-hover). Ignore the accepted answer, there are plenty of interesting workarounds. — Robby Cornelissen, Aug 15 '14 at 10:00
Have you even read my code? I tried preserving some space for the `bold` state, somehow it is getting close but not exactly perfect. — arjun, Aug 15 '14 at 10:01
I've looked at your fiddle and your code. You're trying to calculate your way out if it by adapting the padding. The increase in width caused by setting the font weight to bold will depend on the length of the word, so any calculation will be iffy. Oh, and your `padding-left: 2px` rule will not get applied due to the extra `a`. — Robby Cornelissen, Aug 15 '14 at 10:05
Changed it to - `#footer a:hover ~ a{padding-left: 2px; }`. It is somewhat stable, but not perfect — arjun, Aug 15 '14 at 10:10
Here's an [updated fiddle](http://jsfiddle.net/sjeojvos/1/) with one of the recommendations from the referenced question. — Robby Cornelissen, Aug 15 '14 at 10:17

score 1 · Answer 1 · answered Aug 15 '14 at 10:48

You can make a copy of the element and change the position: absolute on :hover

The HTML:

<div>
    <span class="body">Link 1</span>
    <span class="shadow">Link 1</span>
</div> *

The CSS:

div{
    display: inline-block;
    font-size: 32px;
}

div:hover .body{
    font-weight: bold;
    position: absolute;
}

div:hover .shadow{
    display: initial;
}

.shadow{
    color: white;
    display: none;
}

Fiddle: http://jsfiddle.net/1bdmgt8n/2/

CSS hover state - prevent shakiness of other elements

1 Answers1