cambio efecto hover

nfo · #1 (**permalink**) 01/07/2010, 05:17

Buenas compañeros necesito una ayudita.

Como veis en la imagen tengo 5 cuadros de los cuales segun vaya pasando el raton por encima debe de cambiar la imagen.

Para que lo entendais mejor el primer cuadradito debe cambiar todos los colores por otros, el segundo cuadrado debe de cambiar solo el primero. etc. etc.

He intentado hacerlo con onmouseover pero no me sale lo que quiero, tendria que hacerlo con jquery ????. a ver si me decis como puedo hacerlo.

gracias.

JavierB · #2 (**permalink**) 01/07/2010, 12:20

Hola nfo

Muevo tu tema al foro de Frameworks y Plugins Javascript desde CSS.

Saludos,

mayid · #3 (**permalink**) 01/07/2010, 17:48

Tendrías que mostrar que es lo que intentaste. Con jquery, el mouseover queda así:

Cita:

$('#Ral8084').mouseover(function() {
$('#caja1').css('background, red');
});

http://api.jquery.com/mouseover/

nfo · #4 (**permalink**) 01/07/2010, 23:58

lo que intente hacer es con css pero el resultado que y oquiero no me lo da.

Necesito que cuando pase el rato por el primer icono cambie todas las imagenes de abajo, si paso el raton por el segundo icono solo me cambie las dos primeras...etc.

con jquery no se como se hace.

Código:

	<a href="" target="_self"><img 
  src="./images/icon/mos_enro.jpg" alt="Mosquiteras Enrollables" width="77" height="91" border="0" 
  id="enrollable" onmouseover="MM_swapImage('enrollable','','./images/icon/h_mos_enro.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>

mayid · #5 (**permalink**) 02/07/2010, 09:08

Para empezar, en jquery dejamos de usar los eventos inline. Es decir, en vez de poner ahi onmouseover, pones un evento mouseover (sin el "on") pero en la seccion de codigo, en <head>. Asi como lo puse yo en el ejemplo.

A lo que quieras mostrar/ocultar tenes que darle atributos class. Pueden ser varios para un mismo elemento. Ej:

<div class="clase1 clase2 clase3"> Texto y contenido </div>

Luego, con un disparador, elegis que esconder. A las clases se accede con un "." (punto).

Cita:

$('#Ral8084').mouseover(function() {
$('#clase1').css('background, red');
});

$('#Ral9032').mouseover(function() {
$('#clase2').css('background, blue');
});

Ahora, para que funcione la asignacion del evento, a este codigo hay que ponerlo en la seccion document.ready:

Cita:

$(document).ready(function(){

$('#Ral8084').mouseover(function() {
$('#clase1').css('background, red');
});

})

Lo probás?