Quick Tip: Fixing the font-weight Problem on Hover States

Have you ever tried to change the value of the font-weight property on link states? If yes, you may have noticed that the text shifts.

In this quick tip, we’ll first learn what causes this undesired behavior and then we’ll examine two possible solutions.

[author_more]

Identifying the Problem

As a first step, let’s identify the problem by looking at a simple example. Consider the following visualization:

The items are links, so in your CSS you might try something like this:

[code language="css"]
a:hover {
font-weight: bold;
}
[/code]

Because we usually don’t define a fixed width for items like this, when the user hovers over the links, the text shifts. Of course, this happens because the width of each link gets bigger on hover. To test it, we assign the active class to the first link and add this CSS rule:

[code language="css"]
.active {
font-weight: bold;
}
[/code]

Lastly, we change the text of the second link to be equal to the first one, like so:

Continue reading %Quick Tip: Fixing the font-weight Problem on Hover States%

by George Martsoukos via SitePoint