Los elementos en línea cambian cuando se resaltan en negrita

Creé un menú horizontal usando listas HTML y CSS. Todo funciona como debería, excepto cuando pasa el mouse sobre los enlaces. Verá, creé un estado de desplazamiento en negrita para los enlaces, y ahora los enlaces del menú cambian debido a la diferencia de tamaño en negrita.

Me encuentro con el mismo problema que esta publicación de SitePoint . Sin embargo, la publicación no tiene la solución adecuada. He buscado una solución en todas partes y no puedo encontrarla. Seguramente no puedo ser el único tratando de hacer esto.

¿Alguien tiene alguna idea?

PD: No conozco el ancho del texto en los elementos del menú, así que no puedo establecer el ancho de los elementos li.

.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: #000; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

<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>

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::before {
    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>

Consulte el ejemplo de trabajo en JSfiddle . La idea es reservar espacio para contenido en negrita (o cualquier estilo de :hoverestado) en :beforepseudoelemento y usar la etiqueta de título como fuente de contenido.

Una solución comprometida es simular negrita con text-shadow, por ejemplo:

sombra de texto: 0 0 0.01px negro;

Para una mejor comparación, creé estos ejemplos:

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 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px 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>

Pasar a text-shadowun valor realmente bajo para blur-radiushará que el efecto de desenfoque no sea tan evidente.

En general, cuanto más repita, text-shadowmás audaz será su texto, pero al mismo tiempo perderá la forma original de las letras.

¡Debo advertirle que configurar las blur-radiusfracciones no va a representar lo mismo en todos los navegadores! Safari, por ejemplo, necesita valores más grandes para representarlo de la misma manera que lo hará Chrome.

Si no puede establecer el ancho, significa que el ancho cambiará a medida que el texto se pone en negrita. No hay forma de evitar esto, excepto por compromisos como modificar el relleno / márgenes para cada estado.

Otra idea es usar letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

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

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Una línea en jquery:

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

editar: Si bien esto puede generar la solución, uno debe mencionar que no funciona junto con el código en la publicación original. "display: inline" tiene que ser reemplazado con parámetros flotantes para que un ajuste de ancho sea efectivo y que el menú horizontal funcione según lo previsto.

Solución CSS3 - Experimental

Pensé en compartir una solución diferente que nadie sugirió aquí. Hay una propiedad llamada text-strokeque será útil para esto.

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

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

Aquí, estoy apuntando el texto dentro de la spanetiqueta y lo trazamos un píxel con el blackque simulará el boldestilo de ese texto en particular.

Tenga en cuenta que esta propiedad no es ampliamente compatible, a partir de ahora (al escribir esta respuesta), solo Chrome y Firefox parecen admitir esto. Para obtener más información sobre la compatibilidad del navegador text-stroke, puede consultar CanIUse .

Solo para compartir algunas cosas adicionales, puede usar -webkit-text-stroke-width: 1px;si no está buscando establecer un colorpara su accidente cerebrovascular.

Podrías usar algo como

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

y luego en su CSS simplemente configure el contenido de la extensión en negrita y escóndelo con visibilidad: oculto, para que mantenga sus dimensiones. Luego puede ajustar los márgenes de los siguientes elementos para que se ajusten correctamente.

Sin embargo, no estoy seguro de si este enfoque es compatible con SEO.

Acabo de resolver el problema con la solución "sombra". Parece lo más simple y efectivo.

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

No es necesario repetir la sombra tres veces (el resultado fue el mismo para mí).

Tuve un problema similar al tuyo. Quería que mis enlaces se pusieran en negrita cuando pasas el mouse sobre ellos, pero no solo en el menú sino también en el texto. Como puede suponer, sería una verdadera tarea descubrir todos los diferentes anchos. La solución es bastante simple:

Cree un cuadro que contenga el texto del enlace en negrita pero coloreado como su fondo y con su enlace real encima. Aquí hay un ejemplo de mi página:

CSS:

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

Por supuesto, debe reemplazar # FFFFE0 por el color de fondo de su página. Los índices z no parecen ser necesarios, pero los pongo de todos modos (ya que el elemento "hipo" aparecerá después del elemento "hiper" en el código HTML). Ahora, para poner un enlace en su página, incluya lo siguiente:

HTML:

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

El segundo "aquí" será invisible y estará oculto debajo de su enlace. Como se trata de un cuadro estático con el texto del enlace en negrita, el resto del texto ya no cambiará, ya que ya está desplazado antes de pasar el cursor sobre el enlace.

Espero haber podido ayudar :).

Hasta la vista

Puede trabajar con la propiedad "margen":

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

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

Solo asegúrese de que el margen izquierdo y derecho sean lo suficientemente grandes para que el espacio adicional pueda contener el texto en negrita. Para palabras largas, puede elegir diferentes márgenes. Es solo otra solución pero haciendo el trabajo por mí.

Me gusta usar text-shadow en su lugar. Especialmente porque puedes usar transiciones para animar sombras de texto.

Todo lo que realmente necesitas es:

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

Para una navegación completa, consulte este jsfiddle: https://jsfiddle.net/831r3yrb/

Soporte del navegador y más información sobre text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Aconsejaría no cambiar las fuentes (°) al pasar el mouse sobre ellas. En este caso, se trata solo de que los elementos del menú se mueven un poco, pero he visto casos en los que el párrafo completo se reformatea porque el ensanchamiento provoca un ajuste de palabra adicional. No desea ver que esto suceda cuando lo único que hace es mover el cursor; Si no hace nada, el diseño de la página no debería cambiar.

El cambio también puede ocurrir al cambiar entre normal y cursiva. Intentaría cambiar los colores o alternar el subrayado si tiene espacio debajo del texto. (el subrayado debe mantenerse alejado del borde inferior)

Sería abucheado si usara el cambio de fuentes para mi clase de Diseño de Formulario :-)

(°) La palabra fuente a menudo se usa incorrectamente. "Verdana" es un tipo de letra , "Verdana normal" y "Verdana bold" son fuentes diferentes del mismo tipo de letra.

Uso la solución de sombra de texto como algunas otras mencionadas aquí:

text-shadow: 0 0 0.01px;

la diferencia es que no especifico el color de sombra, por lo que esta solución es universal para todos los colores de fuente.

Un enfoque alternativo sería "emular" texto en negrita mediante text-shadow. Esto tiene la ventaja (/ malus, dependiendo de su caso) para trabajar también en iconos de fuente.

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

Un poco hacky, aunque te ahorra la duplicación de texto (lo cual es útil si es mucho, como lo fue en mi caso).

Esta es la solución que prefiero. Requiere un poco de JS pero no necesita que su propiedad de título sea exactamente la misma y su CSS puede seguir siendo muy 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>

¿Qué hay de esto? Una solución libre de JavaScript - CSS3.

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>

Solución no muy elegante, pero "funciona":

a
{
    color: #fff;
}

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

He combinado un montón de las técnicas anteriores para proporcionar algo que no apesta totalmente con js desactivado y es aún mejor con un poco de jQuery. Ahora que está mejorando la compatibilidad con navegadores para el espaciado entre letras de subpíxeles, es realmente agradable usarlo.

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>

Es mejor usar un :: before en lugar de un :: after así:

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

Para más detalles: https://jsfiddle.net/r25foavy/

Arreglé el menú al pasar por alto el éxito audaz. Es compatible con responsive, este es mi código:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

Si no es reacio a usar Javascript, puede establecer el ancho adecuado una vez que se muestra la página. Así es como lo hice (usando 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' });
}

Realmente no puedo soportarlo cuando alguien te dice que no hagas algo así cuando hay una solución simple al problema. No estoy seguro acerca de los elementos li, pero acabo de solucionar el mismo problema. Tengo un menú que consta de etiquetas div.

Simplemente configure la etiqueta div para que sea "display: bloque en línea". En línea para que se sientan uno al lado del otro y bloqueen para que pueda establecer un ancho. Simplemente configure el ancho lo suficientemente ancho para acomodar el texto en negrita y alinee el centro del texto.

(Nota: parece estar eliminando mi html [a continuación], pero cada elemento de menú tenía una etiqueta div envuelta alrededor con la identificación correspondiente y el nombre de la clase SearchBar_Cateogory. Es decir: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (tenía etiquetas de anclaje alrededor de cada elemento del menú, pero no pude enviarlas como nuevo usuario)

<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;
}

prueba esto:

.nav {
  font-family: monospace;
}

También puede probar los márgenes negativos si el texto en negrita es más ancho que el normal. (no siempre) Entonces, la idea es usar clases en su lugar para diseñar el estado: hover.

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;
}

¡Espero poder ayudar!