📣 Seu anúncio aqui? Anuncie no ForoBeta

Como aplicar uma transição bold no hover

  • Autor Autor Kuroro1990
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
K

Kuroro1990

Alfa
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
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
Inserir CODE, HTML ou PHP: 
a:hover { 
	color: #0000ff;  
}


Este es el código de la transición

Inserir CODE, HTML ou 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;
}
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Al parecer las transiciones de font-weight no sirven en Chrome ni Internet Explorer, quizás sea ese el problema.
 
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 🙂
 
Creo que eso se solucionan con
-moz- para firefox
-webkit- para google
 
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
 
Dos a:hover?
 
Llego muy tarde pero dejo mi aporte en JQuery:
Inserir CODE, HTML ou 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!
 
EnzoZ disse:
Llego muy tarde pero dejo mi aporte en JQuery:
Inserir CODE, HTML ou 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!
Clique para expandir...

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 disse:
Creo que eso se solucionan con
-moz- para firefox
-webkit- para google
Clique para expandir...

Caramba amigo no sabes de que hablas....
 
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.
 
Você precisa estar logado ou cadastrado para responder aqui.
Voltar
Topo