que el div oculto aparesca en una sola imagen

[Chris_1610]

espero que me ayuden miren cuando paso el mouse en unas de las imagen , me aparece el div oculto pero me aparese en las dos imaganes y lo que quiero es k me aparesca en la imagen done paso el mouse espero haberme especificado bien

Código CSS:

.nombre-musica{
color:#CCCCCC;
height:20px;
width:220px;}
 
.reproductor{
display:none;
height:20px;
width:100%;
margin-top:140px;
background:#FF0000;}
 

Código HTML:

 <article class="musica" id="musica-reproductor" style="background:url(img/3d.jpg);">
      <div class="nombre-musica" style="color:#FF0000;">Febre - 04</div>
      <div class="reproductor"></div>
    </article>
    <article class="musica" style="background:url(img/meprefieresami.jpg);">
      <div class="nombre-musica" style="color:#0033FF;">Febre - 04</div>
            <div class="reproductor"></div>

    </article> 

Código Javascript:

$(document).ready(function(){
  $(".musica").mouseover(function(){
     var reproductor=$(".reproductor").css("display");
     if(reproductor == "none"){
       $(".reproductor").css("display" , "block");
     }else{
       $(".reproductor").css("display" , "none");
 
     }
  });
  
  $(".musica").mouseout(function(){
     $(".reproductor").css("display", "none");
  });
  
  
});
 

[zelgaki]

prueba con
$(this).find('.reproductor').css('display, 'block');

[Chris_1610]

gracias brother me pudieras explicar como fucniona el $(this)

[zelgaki]

Iniciado por Chris_1610

gracias brother me pudieras explicar como fucniona el $(this)

en este caso $(this) hace referencia sobre el elemento en el que pasamos el mouse en este caso el article con la clase musica.

otro ejemplo podria se que si tienes

<a href="#"> link </a>

y teines
$("a").click(function(){
$(this).attr("href","index.html")
});

solo hace referencia al "a" clikeado.

soy malo explicando, a ver si me entendistes