Coder Perfect

When hovering over inline elements, they become bold.


Using HTML lists and CSS, I designed a horizontal menu. Except when you hover over the links, everything works as it should. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.

I’m having the same issue as this SitePoint post. The post, however, lacks a clear solution. I’ve looked everywhere for a solution and have come up empty-handed. I’m sure I’m not the only one trying to accomplish this.

Anyone have any suggestions?

P.S. Because I don’t know the width of the text in menu items, I can’t just change the li item width.

Asked by Billy

Solution #1

Use an invisible pseudo-element with the same content and styling as the parent hover style to pre-set the width. Use a data attribute, such as title, as the content source.

Answered by 350D

Solution #2

Faking bold using text-shadow is a compromise solution, for example:

For a better comparison, I made the following examples:

Passing a very low blur-radius value to text-shadow will make the blurring effect less noticeable.

In general, the more you repeat text-shadow, the bolder your text will get, but the original shape of the letters will be lost.

I should point out that changing the blur-radius to fractions will not produce the same results in all browsers! Safari, for example, requires larger values in order to represent it in the same way as Chrome does.

Answered by Stefan J

Solution #3

Another option is to use letter spacing.

Answered by John Magnolia

Solution #4

If you can’t modify the width, the width will change as the text becomes bolder. There’s no way around that until you make compromises like changing the padding/margins for each state.

Answered by Andrew Vit

Solution #5

In jquery, there is only one line:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);

edit: While this can bring about the solution, one should mention that it does not work in conjunction with the code in the original post. “display:inline” has to be replaced with floating-parameters for a width-setting to be effective and that horizontal menu to work as intended.

Answered by Alex

Post is based on