Question

Im having an issue with some jquery im using. I want to be able to hover a songs album cover which will then display a play button and allow me to play a song. At the moment though when I hover the album cover all the divs containing the same div name for the play button seem to show on the page. How can I icolate the play button to only show on the albumcover I am actively hovering. Also how can I stop the button from fading in and then fading out straight away?

Im using this jquery code at the moment

<script>

$(document).ready(function()
{    
 $("#cover_overlay").hover(
  function () {
    $(".el-play").fadeIn('slow');
  },
  function () {
    $(".el-play").fadeOut('slow');
  }
);
});

</script>

Thanks

Answer 1

Your first problem in your jsFiddle is that you’re assigning the same ID to multiple elements. This is a no-no, as JavaScript will only select the first element it finds with a given ID. You need to replace all those IDs with classes.

Second, you’re selecting the el-play button with a class, so EVERY element with that class will be faded in and out at the same time.

Third, you have a problem in that moving the cursor over the .el-play button counts as moving it off of .cover_overlay, so the button immediately fades out. You need to add a handler for the .el-play element as well to cover this.

Here’s one approach that works for me: http://jsfiddle.net/mblase75/jY2hL/8/

$(document).ready(function() {
    window.onPlay = false;
    $(".cover_overlay").hover(function() {
        $(this).prev(".el-play").fadeIn('slow');
    }, function() {
        $this = $(this);
        setTimeout(function(){
            if(!window.onPlay) { 
                $this.prev(".el-play").fadeOut('slow');
            }}, 100);
    });

    $('.el-play').hover(function() {
        window.onPlay = true;
    },function() {
        window.onPlay = false;
    });
});

If that doesn’t work, please study the jQuery tree traversal methods to figure out exactly how to get from .cover_overlay to .el-play.