jquery selectores de clase - simultaneidad

[kesioo]

Buenas a todos,
les hago una consulta..
tengo un html en el que cargo algunos items similares con img y descripcion.

La idea es que la descripcion este oculta, y al pasar sobre el div, se oculte la img mostrando la descripcion.

el html

Código:

<div id="expandir" class="grid_12">
            <div class="unidad">
                <div class="imagen"><img src="images/img_btn.png" /></div>
                <div class="info">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Donec in arcu id orci auctor fringilla cursus rutrum leo. 
                    Praesent non ante in lectus varius lobortis. 
                    In lorem lacus, dapibus ac bibendum sit amet, mollis ut odio. 
                    Maecenas quam ante, condimentum a sodales non, imperdiet at sem. 
                    Sed nec diam at felis tempor ornare non vel tellus. Aenean bibendum 
                    sem ut erat feugiat tristique faucibus leo cursus.</p>
                </div>
            </div>
            <div class="blank">&nbsp;</div>
        </div>

y la funcion

Código:

$(document).ready(function() {
	$("div.unidad").hover(function(){
		$("div.imagen").fadeOut('slow', function() {
			$("div.info").fadeIn('slow');
			$("div.imagen").css({"display": "none"});
		});
	}, function() {
			$("div.info").fadeOut('slow', function() {
			$("div.imagen").fadeIn('slow');
			$("div.info").css({"display": "none"});
		});
	});
});

el tema es que cuando duplico el item (unidad) y hago hover sobre uno, el efecto lo hace en los 4.. como puedo individualizarlos, sin poner un identificador o clase distinto a cada uno?

se agradece!!
saludos!

[Dany_s]

http://www.forosdelweb.com/f127/jque...-comun-933946/

[kesioo]

gracias por el link.. me sirvio para resolver el problema..

pero ahora tengo otro.. no puedo alcanzar ciertos divs..

la estructura seria

Código:

destacado
	imgDestacada
		operacion /operacion
	/imgDestacada
	info
    		alguna informacion
	/info
    
	descripcion (oculta)
    		alguna descripcion
	/descripcion
/destacado

Necesito ocultar "info" y mostrar "descripcion" al pasar sobre destacado, y a la vez, cambiar la imagen de fondo de imgDestacada.. Pero no consigo hacer mas que ocultar info.
Ademas al estar sobre imgDestacada u otro me toma como mouseOut de destacado..

la fc que intente es :

Código:

$(document).ready(function() {
	$('.destacado').mouseover(function(){
		$('.info', this).fadeOut('slow', function() {
			$('.imgDestacada', this).css('background', 'url(../images/placa_img_hover.png) no-repeat');
			$('.descripcion', this).fadeIn('slow');
			$('.info', this).css({"display": "none"});
			alert ("asdasd");
		});
	}).mouseout( function(){
		$('.info', this).fadeOut('slow', function() {
			$('.descripcion', this).fadeIn('slow');
			$('.info', this).css({"display": "none"});
		});
	});
});

alguna idea?

[Dany_s]

fijate que cuando estás dentro del callback del fadeOut, this ya no hace referencia a .destacado

podés guardar una referencia en una variable

Código Javascript:

$('.destacado').mouseover(function(){
    var destacado = this;
    $('.info', this).fadeOut('slow', function() {
        $('.imgDestacada', destacado).css('background', 'url(../images/placa_img_hover.png) no-repeat');
        $('.descripcion', destacado).fadeIn('slow');
.
.
.
 

[kesioo]

gracias por tu ayuda nuevamente Dany_s
se me ocurrio que el problema debia venir por cuestiones de alcances, pero realmente no sabia como llegar..
voy a probar con eso y vuelvo para comentar como me ha ido..

saludos,

[kesioo]

Al final pude arreglarlo.. con la solucion para el alcance del objeto que me aportaste, algo mejoro, pero de alguna manera seguia teniendo problema para mantener con el mouseover/mouseout al pasar de padres e hijos..
buscando encontre solucionarlo con mouseenter/mouseleave y ahora funciona perfectamente.

aca esta el link por si alguno lo desea
http://jquery-howto.blogspot.com/200...-mouseout.html

mi codigo ha quedado asi:

Código:

$(document).ready(function() {
	$('.destacado').mouseenter(function(){
		var destacado = this;
		$('.imgDestacada', destacado).css('background-image', 'url(images/placa_img_hover.png)');
		$('.info', this).fadeOut('fast', function() {
			$('.descripcion', destacado).fadeIn('fast');
		});
	}).mouseleave( function(){
		var destacado = this;
		$('.imgDestacada', destacado).css('background-image', 'url(images/placa_img.png)');
		$('.descripcion', this).fadeOut('fast', function() {
			$('.info', destacado).fadeIn('fast');
		});
	});
});

saludos y como siempre gracias por la ayuda