Cómo aplicar una transición bold en el hover

Kuroro1990 · 22 Dic 2013

Hola a todos nuevamente!!!

Vuelvo a molestar porque me ha surgido otro problema. En realidad no uno muy grabe, solo una cosa que me gustaria saber, y como dice el titulo, es aplicar el efecto bold al hover, pero con transición.

Apliqué un cambió de color con transición y no tuve problemas, pero cuando le agrego font-weight: bold; no logro hacer que el cambio de color y las negritas sean con transición. Cambié color por all en la transición pero no funcionó.

Espero que alguien me pueda ayudar como se hace eso, Muchas Gracias

este es el código del hover

Insertar CODE, HTML o PHP:

a:hover { 
	color: #0000ff;  
}

Este es el código de la transición

Insertar CODE, HTML o PHP:

a:hover {
	-webkit-transition: color, 0.20s ease-in-out;
	-moz-transition: color, 0.20s ease-in-out;
	-o-transition: color, 0.20s ease-in-out;
	-ms-transition: color, 0.20s ease-in-out;
	transition: color, 0.20s ease-in-out;
}

Praox · 22 Dic 2013

Al parecer las transiciones de font-weight no sirven en Chrome ni Internet Explorer, quizás sea ese el problema.

Lopezito · 22 Dic 2013

Puedes revisar esto: CSS3 - transitions

Un saludo. :encouragement:

Kuroro1990 · 22 Dic 2013

Muchas gracias a los dos

Al parecer no era problema mio si no de compatibilidad

mejor descartar esta opción, no quierio agregar cosas que al final serán poco compatibles con navegadores.

Muchas gracias nuevamente

Angel Perales · 22 Dic 2013

Creo que eso se solucionan con
-moz- para firefox
-webkit- para google

LordThanatos · 23 Ene 2014

La clave está en no usar negrita, sino sombras o algún otro estilo CSS3 que simule las negritas y que sea compatible con transiciones. Acá tenés una posibilidad muy viable:

CSS3 - text-stroke

jazhiel · 5 Feb 2014

Dos a:hover?

EnzoZ · 5 Feb 2014

Llego muy tarde pero dejo mi aporte en JQuery:

Insertar CODE, HTML o PHP:

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function(){
//cuando el documento haya cargado
//y
//cuando el mouse este encima de a
$("a").mouseover(function(){
//le añadimos negrita en 0.2 seg
$("a").animate({"font-weight":"800"},200);
});
//cuando quitamos el mouse de encima
$("a").mouseleave(function(){
//ponemos la letra normal
$("a").animate({"font-weight":"400"},200);
});
});
</script>
</head>
<body>
<a href="#">HOLA</a>
</body>
</html>

Un saludo!

Chakal01 · 27 Feb 2014

EnzoZ dijo:

Llego muy tarde pero dejo mi aporte en JQuery:

Insertar CODE, HTML o PHP:

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function(){
//cuando el documento haya cargado
//y
//cuando el mouse este encima de a
$("a").mouseover(function(){
//le añadimos negrita en 0.2 seg
$("a").animate({"font-weight":"800"},200);
});
//cuando quitamos el mouse de encima
$("a").mouseleave(function(){
//ponemos la letra normal
$("a").animate({"font-weight":"400"},200);
});
});
</script>
</head>
<body>
<a href="#">HOLA</a>
</body>
</html>

Un saludo!

Lo que puede lograr JQuery gracias por pasarlo se que no soy el del tema pero me gustó.

---------- Post agregado el 28-feb-2014 hora: 03:22 ----------

Jangel dijo:
Creo que eso se solucionan con
-moz- para firefox
-webkit- para google

Caramba amigo no sabes de que hablas....

elgusty00 · 28 Feb 2014

La transición que usa css3 comienza a funcionar en las versiones: IE10, Chrome 26.0, Firefoz 16.0. Y es mas performante que las animaciones de jquery.

Seguramente, de aquí a un tiempo, va a ser la mejor opción, cuando los browsers de los usuarios se vayan actualizando.

Saludos.