Animación con hipervinculos

acumulador · #1 (**permalink**) 20/05/2014, 15:08

Buenas tardes amigos, mi pregunta y preocupación esta oportunidad es sobre animaciones con hipervinculos. Me explico: necesito que al pasar el mouse sobre un hiervinculo se anime un div que esta justo debajo del hipérvinculo, la animación es sencilla pues solo necesito que se mueva permanentemente hacia la derecha pero solo mientras esta el mouse sobre el hipervinculo, al retirarlo necesito que se devuelva a su posición inicial pero despacio.

He visto y entiendo como mover un div cuando tiene el mouse sobre el mismo pero no se me hace claro hacer mover un div ajeno al que tiene el mouse encima con "hover"

Espero me puedan colaborar y sacarme de este lio, de antemano muchas gracias por su colaboración.

pzin · #2 (**permalink**) 20/05/2014, 15:41

Eso sólo podrás hacerlo si ambos elementos son hermanos, o el segundo descendiente del primero.

Hermano:

Código CSS:

Ver originala:hover ~ div {}

Hijo:

Código CSS:

Ver originala:hover div {}

Obviamente también puede ser un elemento descendiente de un hermano y cosas por el estilo. Lo que no se puede hacer de momento es moverse hacia arriba con los selectores. Si necesitas esto último, tal vez sea mejor que uses JavaScript.

acumulador · #3 (**permalink**) 20/05/2014, 16:26

Muchas gracias por responder, creo que hago lo que me indicas y aun no veo nada de animación, mira mi codigo a ver que hago mal. CSS

Código:

#boton:hover #midiv
{
	animation:mueveCaja 5s;
	-webkit-animation:mueveCaja 5s;
}

y el HTML:

Código:

<body>
	<div id="boton">
		<a href="#">Animar</a>
	</div>
	<div id="midiv">
	</div>
</body>

El nombre de la animación como pueden ver es mueveCaja y la idea es aplicarla a midiv cuando el mouse este sobre el div con id boton. Gracias de nuevo por la ayuda.

pzin · #4 (**permalink**) 22/05/2014, 20:02

Tienes mal el selector. Con esto:

Código CSS:

Ver original#boton:hover #midiv

Seleccionas un algo cuyo identificor es #midiv que está dentro de otro algo llamado #boton. Y obviamente no está dentro en tu caso, sino que es un elemento adyacente (o hermano, como lo quieras llamar), entonces puedes usar ~ o incluso + (aunque este es para elementos posteriores adyacentes directos, que en tu caso concreto valdría).

Dicho lo cual:

Código CSS:

Ver original#boton:hover ~ #midiv

O también:

Código CSS:

Ver original#boton:hover + #midiv