mover dos imagenes a la vez

[mluis12]

Hola que tal, me gustaria saber si hay alguna manera en css3, php, jquery (de este ultimo no tengo casi conocimientos), etc de hacer lo siguiente.

yo tengo una clase .contenido7 que tiene una imagen1
y tengo una clase .contenido6 que tiene una imagen2

yo quisiera que cuando hago el efecto hover sobre la imagen1 del contenido7, esta se desplace a la derecha 10px, pero que a la vez la imagen2 del contenido6 tambien se desplace 50px.

hay o existe la manera de hacer esto?

muchas gracias.

[quinqui]

Holas, mluis12.

Mmh, o sea, en efecto con CSS puedes hacer que una imagen (u objeto) se "mueva" al pasar el mouse por encima:

Código css:

.contenido7 IMG:hover
{ position:relative; left:10px }
 

Pero hasta lo que sé, esto sólo afecta al objeto que gatilla el evento, no podrías alterar las propiedades de otros objetos (a no ser, tal vez, que estuvieran anidados...).

No sé si el CCS3 lo permite ahora, pero en mis limitados conocimientos, yo te diría que te toca programar esta funcionalidad con Javascript directamente (sea usando JS directo, o apoyado con Jquery o similar). Lo cierto es que si ya tienes capturado el :hover de uno de los objetos (la imagen1) con el CSS, no tendrías que programar su comportamiento, sino sólo el del otro objeto (imagen2), aunque dentro del evento del objeto 1. Algo como:

Código javascript:

function mover(objId)
{
 document.getElementById(objId).style.left = "50px";
}
function restaurar(objId)
{
 document.getElementById(objId).style.left = "inherit"; // esto no estoy segura, tú prueba el valor correcto
}
 

Código HTML:

<img id="imagen1" onmouseover="mover('imagen2')" onmouseout="restaurar('imagen2')" />
<img id="imagen2" /> 

Saludos!!