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"> </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!