html - texto - Elementos en línea que cambian cuando están en negrita al pasar el mouse sobre ellos
pasar el mouse por la imagen y dar informacion html (21)
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 hover audaz para los enlaces, y ahora los enlaces de 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. Busqué una solución en todas partes y no puedo encontrar ninguna. Seguramente no puedo ser el único que intenta 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.
Este es mi código:
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; }
¿Qué hay de esto? Una solución javascript - CSS3 gratis.
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>
Acabo de resolver el problema con la solución "sombra". Parece el 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í).
Aconsejaría no cambiar las fuentes (°) en el vuelo estacionario. En este caso, son solo los elementos del menú los que se mueven un poco, pero he visto casos en los que se reformatea el párrafo completo porque el ensanchamiento causa un ajuste adicional de la palabra. No quiere 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 separado del borde inferior)
Me encantaría si usara el cambio de fuentes para mi clase de diseño de formulario :-)
(°) La palabra fuente a menudo se usa mal. "Verdana" es un tipo de letra , "Verdana normal" y "Verdana negrita" son fuentes diferentes del mismo tipo de letra.
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>
He combinado varias de las técnicas anteriores para proporcionar algo que no es totalmente desagradable con js apagado y es incluso mejor con un poco de jQuery. Ahora que está mejorando el soporte de navegadores para espacios entre letras subpíxel, 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>
Me gusta usar text-shadow en su lugar. Especialmente porque puede 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 obtener una navegación completa, consulte este jsfiddle: https://jsfiddle.net/831r3yrb/
Soporte de navegador y más información sobre text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
Otra idea es usar letter-spacing
a {
letter-spacing: 0.05px
}
a:hover, a:focus {
font-weight: bold;
letter-spacing: 0
}
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 establezca el contenido del tramo en negrita y ocúltelo con visibilidad: oculto, para que mantenga sus dimensiones. Luego puede ajustar los márgenes de los siguientes elementos para que se ajuste correctamente.
No estoy seguro de si este enfoque es SEO amigable sin embargo.
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 los márgenes 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í.
Realmente no puedo soportarlo cuando alguien te dice que no hagas algo de esa manera cuando hay una solución simple al problema. No estoy seguro de los elementos li, pero acabo de solucionar el mismo problema. Tengo un menú que consiste en etiquetas div.
Simplemente configure la etiqueta div para que sea "display: inline-block". En línea para que se sientan uno junto al 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 [abajo], pero cada elemento del menú tenía una etiqueta div rodeada con la ID correspondiente y el nombre de 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 un 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;
}
Si no eres reacio a usar Javascript, puedes establecer el ancho adecuado una vez que se muestre 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'' });
}
Si no puede establecer el ancho, eso significa que el ancho cambiará a medida que el texto se ponga en negrita. No hay forma de evitar esto, excepto mediante compromisos tales como la modificación del relleno / márgenes para cada estado.
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;
}
También puedes 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 lugar de estilo: el estado de desplazamiento.
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!
Tuve un problema similar al tuyo Quería que mis enlaces se pusieran en negrita cuando pasas sobre ellos, pero no solo en el menú, sino también en el texto. Como cree que sería una verdadera tarea descubrir todos los diferentes anchos. La solución es bastante simple:
Crea un cuadro que contenga el texto del enlace en negrita pero con el color de tu fondo y el enlace real encima de él. 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 se ocultará 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 se desplazará porque ya está desplazado antes de desplazarse sobre el enlace.
Espero haber podido ayudar :).
Hasta la vista
Una solución comprometida es falsificar negrita con texto sombreado, por ejemplo:
a:hover{
text-shadow:0 0 1px black, 0 0 1px black, 0 0 1px black
}
Repitiendo 3 veces la sombra hace que parezca no muy borroneada.
aquí hay una idea para un plugin jquery:
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)
También podría ampliar esto para la altura, lo que permite aumentar ligeramente el tamaño de letra al pasar el mouse sin tener que preocuparse por saltar de contenido.
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, se 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 una configuración de ancho sea efectiva y ese menú horizontal funcione como se espera.
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>
Verifique el ejemplo de trabajo en JSfiddle . La idea es reservar espacio para el contenido en negrita (o cualquier :hover estado de desplazamiento) en :after pseudo elemento y usando la etiqueta del título como fuente para el contenido.
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>
Solución CSS3 - Experimental
(Audacia falsa) Pensé compartir una solución diferente que nadie sugirió aquí. Hay una propiedad llamada text-stroke que será útil para esto.
p span:hover {
-webkit-text-stroke: 1px black;
}
<p>Some stuff, <span>hover this,</span> it''s cool</p>
Aquí, apuntaré al texto dentro de la etiqueta span y lo desplazaré por un píxel con black que simulará el estilo en bold para 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 respaldar esto. Para obtener más información sobre el soporte del navegador para text-stroke de text-stroke , puede consultar CanIUse .
Solo por compartir algunas cosas adicionales, puedes usar -webkit-text-stroke-width: 1px; si no está buscando establecer un color para su trazo.