Inline elements shifting when made bold on hover

问题:

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

I encounter the same problem as this SitePoint post. However, the post does not have proper solution. I\'ve searched everywhere for a solution and can\'t find one. Surely I can\'t be the only one trying to do this.

Does anyone have any ideas?

P.S: I don\'t know the width of the text in menu items so I cannot just set the width of the li items.

This is my code:

HTML:

<ul class=\"nav\">
    <li class=\"first\"><a href=\"#\">item 0</a></li>
    <li><a href=\"#\">item 1</a></li>
    <li><a href=\"#\">item 2</a></li>
    <li><a href=\"#\">item 3</a></li>
    <li><a href=\"#\">item 4</a></li>
</ul>

CSS:

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #ffffff; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

回答1:

li, a {
    display:inline-block;
    text-align:center;
    font: normal 14px Open Sans;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href=\"#\" title=\"height\">height</a></li>
    <li><a href=\"#\" title=\"icon\">icon</a></li>
    <li><a href=\"#\" title=\"left\">left</a></li>
    <li><a href=\"#\" title=\"letter-spacing\">letter-spacing</a></li>
    <li><a href=\"#\" title=\"line-height\">line-height</a></li>
</ul>

Check the working example on JSfiddle. The idea is to reserve space for bolded (or any :hover state styles) content in :after pseudo element and using title tag as a source for content.

回答2:

If you cannot set the width, then that means the width will change as the text gets bold. There is no way to avoid this, except by compromises such as modifying the padding/margins for each state.

回答3:

A compromised solution is to fake bold with text-shadow, e.g:

text-shadow: 0 0 0.01px black;

For better comparison I created these examples:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .001px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .001px black, 0 0 .001px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .001px black, 0 0 .001px black, 0 0 .001px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

<ul class=\"bold-x1\">
  <li><a class=\"hover\" href=\"#\">Home</a></li>
  <li><a class=\"hover\" href=\"#\">Products</a></li>
  <li><a href=\"#\">Contact</a></li>
  <li><a href=\"#\">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class=\"bold-x2\">
  <li><a class=\"hover\" href=\"#\">Home</a></li>
  <li><a class=\"hover\" href=\"#\">Products</a></li>
  <li><a href=\"#\">Contact</a></li>
  <li><a href=\"#\">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class=\"bold-native\">
  <li><a class=\"hover\" href=\"#\">Home</a></li>
  <li><a class=\"hover\" href=\"#\">Products</a></li>
  <li><a href=\"#\">Contact</a></li>
  <li><a href=\"#\">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class=\"bold-x3\">
  <li><a class=\"hover\" href=\"#\">Home</a></li>
  <li><a class=\"hover\" href=\"#\">Products</a></li>
  <li><a href=\"#\">Contact</a></li>
  <li><a href=\"#\">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

Passing to text-shadow really low value for blur-radius will make the blurring effect not so apparent.

In general the more your repeat text-shadow the bolder your text will get but in the same time loosing original shape of the letters.

I should warn you that setting the blur-radius to fractions is not going to render the same in all browsers! Safari for example need bigger values to render it the same way Chrome will do.

回答4:

Another idea is using letter-spacing

a {
  letter-spacing: 0.05px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

回答5:

One line in jquery:

$(\'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.

回答6:

You could use somehting like

<ul>
   <li><a href=\"#\">Some text<span><br />Some text</span></a></li>
</ul>

and then in your css just set the span content bold and hide it with visibility: hidden, so that it keeps its dimensions. Then you can adjust margins of the following elements to make it fit properly.

I am not sure if this approach is SEO friendly though.

回答7:

I just solved the problem with the \"shadow\" solution. It seems the most simple and effective.

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

No need to repeat the shadow three times (result was the same for me).

回答8:

I had a problem similar to yours. I wanted my links to get bold when you hover over them but not only in the menu but also in the text. As you cen guess it would be a real chore figuring out all the different widths. The solution is pretty simple:

Create a box that contains the link text in bold but coloured like your background and but your real link above it. Here\'s an example from my page:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

Of course you need to replace #FFFFE0 by the background colour of your page. The z-indices don\'t seem to be necessary but I put them anyway (as the \"hypo\" element will occur after the \"hyper\" element in the HTML-Code). Now, to put a link on your page, include the following:

HTML:

You can find foo <a href=\"http://bar.com\" class=\"hyper\">here</a><span class=\"hypo\">here</span>

The second \"here\" will be invisible and hidden below your link. As this is a static box with your link text in bold, the rest of your text won\'t shift any longer as it is already shifted before you hover over the link.

Hope I was able to help :).

So long

回答9:

I would advice against switching fonts(°) on hover. In this case it\'s just the menu items moving a bit, but I\'ve seen cases where the complete paragraph gets reformatted because the widening causes an extra word wrap. You don\'t want to see this happen when the only thing you do is move the cursor; if you don\'t do anything the page layout should not change.

The shift can also happen when switching between normal and italic. I would try changing colors, or toggle underline if you have room below the text. (underlining should stay clear from the bottom border)

I would be boo\'d if I used switching fonts for my Form Design class :-)

(°) The word font is often misused. \"Verdana\" is a typeface, \"Verdana normal\" and \"Verdana bold\" are different fonts of the same typeface.

回答10:

You can work with the \"margin\" property:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

Just make sure that the left and right margin are big enough so the extra space can contain the bold text. For long words, you might choose different margins. It\'s just another workaround but doing the job for me.

回答11:

CSS3 Solution - Experimental

(Fake boldness)

Thought to share a different solution which no one suggested here. There\'s a property called text-stroke which will be handy for this.

p span:hover {
  -webkit-text-stroke: 1px black;
}

<p>Some stuff, <span>hover this,</span> it\'s cool</p>

Here, I am targeting the text inside of the span tag and we stroke it by a pixel with black which will simulate bold style for that particular text.

Note that this property is not widely supported, as of now (while writing this answer), only Chrome and Firefox seems to support this. For more information on browser support for text-stroke, you can refer to CanIUse.

---

Just for sharing some extra stuff, you can use -webkit-text-stroke-width: 1px; if you are not looking to set a color for your stroke.

回答12:

I like to use text-shadow instead. Especially because you can use transitions to animate text-shadow.

All you really need is:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

For a complete navigation check out this jsfiddle: https://jsfiddle.net/831r3yrb/

Browser support and more info on text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

回答13:

This is the solution I prefer. It requires a bit of JS but you don\'t need your title property to be the exact same and your CSS can remain very simple.

$(\'ul a\').each(function() {
  $(this).css({
    \'padding-left\': 0,
    \'padding-right\': 0,
    \'width\': $(this).outerWidth()
  });
});

li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>
<ul>
  <li><a href=\"#\">item 1</a></li>
  <li><a href=\"#\">item 2</a></li>
  <li><a href=\"#\">item 3</a></li>
</ul>

回答14:

What about this? A javascript - CSS3 free solution.

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href=\"/\" title=\"Home\"><span class=\"l1\">Home</span><span class=\"l2\">Home</span></a></li>
  <li><a href=\"/\" title=\"Contact\"><span class=\"l1\">Contact</span><span class=\"l2\">Contact</span></a></li>
  <li><a href=\"/\" title=\"Sitemap\"><span class=\"l1\">Sitemap</span><span class=\"l2\">Sitemap</span></a></li>
</ul>

回答15:

Not very elegant solution, but \"works\":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

回答16:

I\'ve combined a bunch of the techniques above to provide something that doesn\'t totally suck with js turned off and is even better with a bit of jQuery. Now that browsers support for subpixel letter-spacing is improving, it\'s really nice to use it.

jQuery(document).ready(function($) {
  $(\'.nav a\').each(function(){
      $(this).clone().addClass(\'hoverclone\').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next(\'.hoverclone\');
    regular.parent().not(\'.current_page_item\').hover(function(){
      regular.filter(\':not(:animated)\').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(\':not(:animated)\').fadeTo(250,0);
    });
  });
});

ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>
<ul class=\"nav\">
  <li><a href=\"#\">Item 1</a></li>
  <li><a href=\"#\">Item 2</a></li>
  <li class=\"current_page_item\"><a  href=\"#\">Item 3</a></li>
  <li><a href=\"#\">Item 4</a></li>
  <li><a href=\"#\">Item 5</a></li>
</ul>

回答17:

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}

<ul>
  <li>
    <a href=\"\" aria-label=\"Long-long-long\"></a>
  </li><li>
    <a href=\"\" aria-label=\"or\"></a>
  </li><li>
    <a href=\"\" aria-label=\"Short\"></a>
  </li><li>
    <a href=\"\" aria-label=\"Links\"></a>
  </li><li>
    <a href=\"\" aria-label=\"Here\"></a>
  </li>
</ul>

回答18:

try this:

.nav {
  font-family: monospace;
}

回答19:

If you\'re not averse to using Javascript, you can set the proper width once the page is shown. Here\'s how I did it (using Prototype):

$$(\'ul.nav li\').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype\'s getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle(\'padding-left\'),
      paddingRight = li.getStyle(\'padding-right\');

  // Cut out the \'px\' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: \'bold\' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + \'px\'});
  li.setStyle({ fontWeight: \'normal\', textAlign: \'center\' });
}

回答20:

I really can\'t stand it when someone tells you not to do something that way when there\'s a simple solution to the problem. I\'m not sure about li elements, but I just fixed the same issue. I have a menu consisting of div tags.

Just set the div tag to be \"display: inline-block\". Inline so they sit next to each other and block to that you can set a width. Just set the width wide enough to accomodate for the bolded text and have the text center aligned.

(Note: It seems to be stripping out my html [below], but each menu item had a div tag wrapped around it with the corrasponding ID and the class name SearchBar_Cateogory. ie: <div id=\"ROS_SearchSermons\" class=\"SearchBar_Category\">

HTML (I had anchor tags wrapped around each menu item, but i wasn\'t able to submit them as a new user)

<div id=\"ROS_SearchSermons\" class=\"SearchBar_Cateogry bold\">Sermons</div>|
<div id=\"ROS_SearchIllustrations\" class=\"SearchBar_Cateogry\">Illustrations</div>|
<div id=\"ROS_SearchVideos\" class=\"SearchBar_Cateogry\">Videos</div>|
<div id=\"ROS_SearchPowerPoints\" class=\"SearchBar_Cateogry\">PowerPoints</div>|
<div id=\"ROS_SearchScripture\" class=\"SearchBar_Cateogry\">Scripture</div>|

CSS:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}

回答21:

You can try the negative margins too if the bold text is wider than the regular. (not always) So the idea is to use classes instead to style the :hover state.

jQuery:

 $(\".nav-main .navbar-collapse > ul > li > a\").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass(\"hover\");
    $(this).css({
       \"margin-left\": -(($(this).outerWidth() - originalWidth) / 2),
       \"margin-right\": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr(\"style\");
    $(this).parent().removeClass(\"hover\");
 });

CSS:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

I hope I could help!

回答22:

here\'s an idea for a jquery plugin:

for all of the elements that you want bold mouse-over:
    - on mouseover:
        - calculate the width W and center C of the element
        - copy the element and hide the original with visibility:hidden (so it still takes up the same space)
        - make the text of the copied element bold and calculate the new width W2
        - position the element absolute left at C-(W2/2)

You could easily extend this for height as well, making it possible to slightly increase the font-size on mouseover without having to worry about jumping content.