[SOLUCIONADO] cambiar fondo hover

[jules182]

Hola a todos:

como podría conseguir este efecto (os pongo el enlace mas abajo) el que esta debajo del slider consigo que al pasar el ratón cambie de color pero quería que hiciera esa "animación" esto es lo que tengo:

Código HTML:

<div class="kase">
<h5 >Hola</h5>
<p style="text-align:justify"> texto que cambia de color </p>
</div> 

Código:

h5{
font-size: 18px;
text-transform:uppercase;
color:black;
}
.kase {background-color: #EFFBFB; }

.kase:hover {
background:#707276;
font-weight:bold;
color:white;
}

este es el enlace: [URL="http://themes.laborator.co/#theme=silicon"]http://themes.laborator.co/#theme=silicon[/URL]

[madman_18]

Eso podrás lograrlo con jQuery, si buscas un poco en google de cómo animar el fondo usando jQuery darás con algo de info más específico.

Siento no serte de mucha ayuda pero es que no lo he usado mucho este tipo de efecto.

[jules182]

Iniciado por madman_18

Eso podrás lograrlo con jQuery, si buscas un poco en google de cómo animar el fondo usando jQuery darás con algo de info más específico.

Siento no serte de mucha ayuda pero es que no lo he usado mucho este tipo de efecto.

Muchas gracias igualmente :D buscare eso :)

[alex_dh]

eso que dice "multi-purpose" etc?

[jules182]

Iniciado por alex_dh

eso que dice "multi-purpose" etc?

Si, eso mismo!

[sergi_multimedia]

Otra solución sería hacerlo con CSS transition, aunque el resultado no sería exactamente igual, no se podría hacer de arriba abajo, sino se fundiría a la vez, y le puedes añadir el tiempo que dura la transición.

Este vídeo te puede ayudar ;)

http://www.youtube.com/watch?v=c6tt3...FEF04&index=10

[pzin]

Dejo esto que hice para mostrar que no hay problema en hacerlo con CSS.

http://codepen.io/pzin/pen/zjgEs

Como soy vago lo hice usando Sass y prefix-free.

Edito: Dado que sólo la última versión de chrome soporta la animación de pseudo-elementos, en versiones anteriores (26) es de suponer que no funcione. Luego en IE9 tampoco, que no es tan sorpresivo. De todas formas en vez de con un pseudo-elemento puede hacerse con algún elemento real. Lo mismo es.

[jules182]

Muchas gracias a todos por las respuestas :D

[jules182]

Tengo un problema, he intentado poner que al pasar el ratón en una tabla cambie el color pero hace una cosa muy rara, no entiendo el por que! a ver que pongo mal


Aqui les dejo el enlace [URL="http://jotadesigner.com/trabajos/internetrural2/"]http://jotadesigner.com/trabajos/internetrural2/[/URL]

[jules182]

una ayudita :)

[Drakerz]

Buenas, me gustaría que brindes un poco mas de información especifica sobre lo que llamas "raro" para ver como podemos solucionarlo

[Drakerz]

Jules te voy a dejar una sugerencia para que tengas en cuenta. Hoy entre a tu sitio y lo empece a analizar y me encontré en la sección "Quienes Somos" con una tipografía muy poco simpática para la vista, te sugeriría que le cambies el color por algún otro que sea mas fácil de notar

No se con exactitud tu problema hasta que aclares bien que es, pero por curiosidad te refieres al hover de la tabla la que se pinta de azul y el texto cuando le haces hover se pinta de blanco? En este momento no me encuentro en mi PC asi que no lo pude ver con mucho tiempo pero para ir descartando probaste quitarle al siguiente código, el color white del hover?

body ul:hover{color:white;}

[jules182]

Iniciado por Drakerz

Jules te voy a dejar una sugerencia para que tengas en cuenta. Hoy entre a tu sitio y lo empece a analizar y me encontré en la sección "Quienes Somos" con una tipografía muy poco simpática para la vista, te sugeriría que le cambies el color por algún otro que sea mas fácil de notar

No se con exactitud tu problema hasta que aclares bien que es, pero por curiosidad te refieres al hover de la tabla la que se pinta de azul y el texto cuando le haces hover se pinta de blanco? En este momento no me encuentro en mi PC asi que no lo pude ver con mucho tiempo pero para ir descartando probaste quitarle al siguiente código, el color white del hover?

body ul:hover{color:white;}

Gracias por tu sugerencia la tendré en cuenta y la cambiaré!

Lo que quiero hacer es que cuando pase el ratón se cambie el texto a blanco y el a fondo azul, pero que cambie cuando tenga el ratón en cualquier parte del Cuadro de la tabla, no solo cuando esté encima del texto!

Un saludo

[pzin]

Entonces usa la pseudoclase pegada al elemento:

Código CSS:

table:hover td {
  color: white;
  background-color: blue;
}
 

[jules182]

Iniciado por pzin

Entonces usa la pseudoclase pegada al elemento:

Código CSS:

table:hover td {
  color: white;
  background-color: blue;
}
 

Eso ya lo hice!

[pzin]

¿Y no funciona? Yo es que no veo ninguna tabla en el enlace que has puesto así que no puedo saber qué hiciste o que no hiciste.

[jules182]

Iniciado por pzin

¿Y no funciona? Yo es que no veo ninguna tabla en el enlace que has puesto así que no puedo saber qué hiciste o que no hiciste.

Abajo hay unas tarifas, a eso me refiero!

[jules182]

Ya lo he solucionado, gracias a todos!

[pzin]

En las tarifas no hay ninguna tabla.

Pero bueno, ahí queda.