(Consulta) Mostrar/Ocultar en forma independiente

[opzina]

Cuando hago mouseover mi objetivo es aplicar la propiedad css "visibility" a cada clase css ".download". PERO quiero hacerlo en forma indivicual, y que NO se aplique a todos los .download.


Código:

Código Javascript:

<script type="text/javascript">
 
 
$(document).ready(function() {
 
    $(".box img").mouseover(function() {
        $(".download").show(function() {
            $(this).css({ "visibility" : "visible" });
        });
    });
        
});
 
</script>
 

[JaiMe_]

Cual es la relación entre .download y .box? están bajo el mismo elemento? Publica el HTML relevante.

[opzina]

Código HTML:

<div class="box left">
            
            <a href="#"><img class="roll left" alt="Taylor" src="img/vintage-guitar-img.png" /></a>
            
                <div class="download">
                    <a href="#">
                        <span>Taylor 555 1995</span>
                        <span>DOWNLOAD PDF</span>
                    </a>
                </div>
            </div>
 

[JaiMe_]

Intenta con esto

Código Javascript:

$(".box img").mouseover(function() {
       $(".download").hide();
       $(this).find(".download").show();
});
 

[opzina]

No es precisamente lo que busco.

Tengo 12 elementos con la clase .download, identicos al html que puse. Todos los elementos estan ocultos cuando la web se cargó.

Cuando paso por encima de una de las imagenes -> <a href="#"><img class="roll left" alt="Taylor" src="img/vintage-guitar-img.png" /></a>

Se tiene que mostrar en forma individual el elemento .download.

[JaiMe_]

Mi error anterior fue el buscar elements con la clase .download en el lugar equivocado. Esto funciona

Código Javascript:

$(function(){
    $(".box img").mouseover(function(){
        $('.download').hide();
        $(this).parents('.box').find('.download').show();
    });
});
 

[opzina]

El código que me indicas se acerca a lo que busco.

El valor inicial por defecto de TODOS las clases .download deben ser ocultas.

Cuando el evento mouseover de la imagen se activa se debe mostrar/activar la clase .download de la respectiva imagen.

Gracias.

[JaiMe_]

Iniciado por opzina

El código que me indicas se acerca a lo que busco.

El valor inicial por defecto de TODOS las clases .download deben ser ocultas.

Cuando el evento mouseover de la imagen se activa se debe mostrar/activar la clase .download de la respectiva imagen.

Gracias.

pequeño quiz:

Habra alguna manera de ocultar todos los elementos con la clase download?

Código CSS:

.download{ display: ______;}
 

[opzina]

Mira esta modificacion:

Código Javascript:

$(function(){
        $(".box img").mouseover(function(){
            $('.download').hide();
            $(this).parents('.box').find('.download').show().css({ "visibility" : "visible" });
        });
    });
 

Ahora si funciona.

Me falto aclararte, que en la hoja de estilos tenia para la clase .download, visibility: hidden;

Disculpas y gracias.