Problema con el a:hover de una imagen

[laurarock]

Buenos días,

tengo una duda sobre una imagen que tengo con un enlace externo.

He creado una imagen como botón para mi web cuando paso el ratón por encima de ella el efecto es cambiar por otra... este es el código:


.myclass > a {
background: url(https://www.miweb.com/img/bottom.png) no-repeat left center;
text-indent: -9999px;
width: 135px;

}

.myclass > a:hover {
background: url(https://www.miweb.com/img/bottom2.png) no-repeat left center;
text-indent: -9999px;
width: 135px;

}

El problema es que cuando se pasa el ratón por encima durante un segundo la imagen desaparece hasta que aparece la nueva. Es solo un segundo pero queda fatal.

¿Alguien sabe porque puede ser?

Gracias

[g3kdigital]

Hola, yo creo que puede ser por 2 cosas:

1. Las imagenes son muy pesadas y no están optimizadas para web.
2. Puede que se solucione sí agregas la propiedad transition en la clase a, ej:
   
   
   Código CSS:

   .myclass > a {transition: background 3s ease}
    

Igual te tengo otras recomendaciones:

1) Para los botones, son muy pocos los casos donde necesitas usar una imagen de fondo, excepto cuando no se puedan generar estos fondos solo con CSS. Igual tienes que darle un fallback y usar un color de fondo contrastante con el texto del boton, en caso que no cargue bien la imagen, por usabilidad.
2) En vez de usar 2 imágenes, usa una sola. Busca sobre como hacer sprites con css y background-position, que además te ahorra las peticiones al servidor.

[laurarock]

Iniciado por g3kdigital

Hola, yo creo que puede ser por 2 cosas:

1. Las imagenes son muy pesadas y no están optimizadas para web.
2. Puede que se solucione sí agregas la propiedad transition en la clase a, ej:
   
   
   Código CSS:

   .myclass > a {transition: background 3s ease}
    

Igual te tengo otras recomendaciones:

1) Para los botones, son muy pocos los casos donde necesitas usar una imagen de fondo, excepto cuando no se puedan generar estos fondos solo con CSS. Igual tienes que darle un fallback y usar un color de fondo contrastante con el texto del boton, en caso que no cargue bien la imagen, por usabilidad.
2) Envés de usar 2 imágenes, usa una sola. Busca sobre como hacer sprites con css y background-position, que además te ahorra las peticiones al servidor.

Muchas gracias por tu tiempo y tus recomendaciones.

Te cuento que estoy usando esta clase en este caso como botón porque es wordpress necesito poner un item de menú en forma de boton cambiando la clase del mismo.Vi que para hacerlo se hacía como background. Esto es lo que buscaba

http://wordpress.stackexchange.com/q...wordpress-menu

Soy muy básica en css y no se hace sprites con css, lo miraré.

Muchas gracias