Question

我遇到了一些使用jquery的问题。我希望能够悬停歌曲专辑封面，然后会显示播放按钮并允许我播放歌曲。目前，当我将鼠标悬停在专辑封面上时，所有包含播放按钮的相同div名称的div似乎都显示在页面上。如何将播放按钮icolate仅显示在我正在积极盘旋的专辑封面上。另外，我怎么能阻止按钮淡入然后立即消失？

我现在正在使用这个jquery代码

<script>

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

</script>

由于

Answer 1

你的jsFiddle中的第一个问题是你要为多个元素分配相同的ID。这是禁忌，因为JavaScript只会选择它使用给定ID找到的第一个元素。您需要用类替换所有这些ID。

其次，您正在选择带有类的el-play按钮，因此该类的每个元素都将同时淡入淡出。

第三，您遇到的问题是，将光标移到.el-play按钮上会将其移出.cover_overlay，因此该按钮会立即淡出。您需要为.el-play元素添加处理程序以覆盖它。

这是一种适合我的方法：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;
    });
});

如果这不起作用，请研究jQuery tree traversal methods以确切了解如何从.cover_overlay到.el-play。

Answer 2

如果.el-play位于#cover_overlay内，请更改

$(".el-play").fadeIn(); //and fadeOut

要

$(this).find(".el-play").fadeIn(); //and fadeOut

否则，您可能需要使用.closest()然后.find()。

关于淡出 - 确保你正在淡入的元素不会遮挡你正在悬停的元素，否则你将触发mouseout，从而淡出元素。

淡入淡出和隐藏div的问题

2 个答案: