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");
  });
  
  
});