JQUERY: mouseover a un elemento específico con una clase común

Gguer · #1 (**permalink**) 02/08/2011, 16:17

¡Hola!

Estoy iniciándome en JQUERY y me he encontrado con el primer inconveniente: no sé cómo seleccionar un elemento específico que contiene una clase común. Es decir, genero una galería de imágenes y al pasar el cursor sobre alguna de ellas quiero que se muestre información específica de ella. Generé dos cajas div que contienen tal información, pero inicialmente tienen un valor display:none. Al llamar a la funcion mouseover sí se muestran las cajas de esa imagen, pero también lo hacen las cajas de todas las demás. Lo que deseo es enviar la referencia de la imagen que tiene el cursor sobre ella y que sólo de esa imagen se muestre la información

¿Es posible hacerlo con jquery? Lo que se me ocurre es crear una función con JavaScript y usar el evento onmouseover pasando "this" como referencia a esa imagen, pero en honor a la limpieza y por la curiosidad de entrar al mundo JQuery quería ver si existe otra manera.

Gracias.

Saludos.

Dany_s · #2 (**permalink**) 03/08/2011, 08:24

no sé tu estructura pero sería algo así

Código HTML:

Ver original<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
    $( function() {
 
        $('.galeria').mouseover(function(){
            $('div', this).show();
        }).mouseout( function(){
            $('div', this).hide();
        });
 
    });
    </script>
    <style>
        .galeria {height:200px; width:200px; float:left; background:#ccc; margin:10px}
        .galeria div{display:none}
    </style>
</head>
<body>
<div class="galeria">
    Uno
    <div>Descripción 1</div>
</div>
 
<div class="galeria">
    Dos
    <div>Descripción 2</div>
</div>
 
<div class="galeria">
    Tres
    <div>Descripción 3</div>
</div>
 
</body>
</html>

Gguer · #3 (**permalink**) 03/08/2011, 09:14

Muchas gracias, Dany_s, ya está solucionado.

Me surgen algunas dudas:

Código HTML:

<div class="imagen">
	<div class="encabezado-img">Encabezado</div>
	<div class="miniaturas">
		<img src="servidor/img.jpg" class="img-miniatura" />
	</div>
         <div class="pie-img">Pie de imagen</div>
</div>

Esa es la estructura básica del contenido que se genera por cada imagen. Una pregunta es: agregar this como parámetro, además del nombre de la clase, ¿es redundante? Es decir, enviar un $('.imagen', this).mouseover(... en lugar de sólo enviar un parámetro.

Éste es el código JQuery que hace otorga la funcionalidad:

Código Javascript:

Ver original$(document).ready(function() {
    $(".imagen").mouseover(function(event) {
        $(".encabezado-img", this).show();
        $(".pie-img", this).show();
    });
    $(".imagen").mouseout(function(event) {
        $(".encabezado-img,.pie-img", this).hide();
        $(".pie-img", this).hide();
    });
});

Otra duda es: ¿el unir las funciones

Código:

mouseover

y

Código:

mouseout

con un punto (.) es lo que se conoe como callback?

Gracias por la respuesta. Buen día.

Dany_s · #4 (**permalink**) 03/08/2011, 15:53

los dos parámetros son para indecarle los elementos a seleccionar dentro de un contexto, o sea que seleccione .encabezado-img dentro del elemento que generó el evento, que es como $(this).find('.encabezado-img')

esto

Código Javascript:

Ver original$(".encabezado-img", this).show();
$(".pie-img", this).show();

podés hacer

Código Javascript:

Ver original$(".encabezado-img, .pie-img", this).show();

como lo tenés en el mouseout

mouseover devuelve el objeto jquery y con el punto hago encadenamiento, para no volver a seleccionar $(".imagen")

Gguer · #5 (**permalink**) 04/08/2011, 07:40

Muy bien. Agradezco tu tiempo, Dany_s, ya ha quedado aclarado todo.
Un saludo.