JQuery鼠标悬停问题

我正在使用以下脚本，并且有占位符div。当我mouseover div播放按钮应该超过占位符。JQuery鼠标悬停问题

我有三个占位符连续。当我将鼠标悬停在一个特定的占位符上时，将出现所有播放按钮。我需要的是当我滑过占位符时，只有播放图像应该出现。

希望你能理解我的问题。任何人都可以帮助我做到这一点？

jQuery.noConflict(); 
     jQuery(function(){ 
     jQuery('.placeholder').mouseover(function(){ 
       jQuery('.play').show('show'); 
     }); 
     jQuery('.placeholder').mouseleave(function(){ 
       jQuery('.play').hide('hide'); 
     }); 
     });

HTML：

<div class="placeholder item"><div class="play"><img src="images/play_ico.jpg"></div></div> 
<div class="placeholder item"><div class="play"><img src="images/play_ico.jpg"></div></div> 
<div class="placeholder item"><div class="play"><img src="images/play_ico.jpg"></div></div>

CSS：

.placeholder{ 
    width:120px; 
    float:left; 
    background:#ccc; 
    height:67px; 
    position:relative; 
} 

.play{ 
    width:120px; 
    height:67px; 
    position:absolute; 
    top:0; 
    left:0; 
    display:none; 
    background:#000; 
    opacity:0.4; 
filter:alpha(opacity=40); 
}

来源

2012-07-27 Mubeen

你有多个'play'类？你可以显示你的标记lang – 2012-07-27 20:11:37

你不应该通过显示“显示”并隐藏“隐藏”，他们没有参数，因为你使用它们：http://api.jquery.com/show/ http：/ /api.jquery.com/hide – jholloman 2012-07-27 20:14:15

尝试以下操作：

jQuery('.placeholder').mouseenter(function(){ 
      jQuery(this).find('.play').show(); 
    }); 
    jQuery('.placeholder').mouseleave(function(){ 
      jQuery(this).find('.play').hide(); 
    });

作为替代，你可以使用hover方法：

jQuery('.placeholder').hover(function() { 
      jQuery(this).find('.play').show(); 
    }, function() { 
      jQuery(this).find('.play').hide(); 
    })

来源

2012-07-27 20:13:30 undefined

+1 *小建议bruv *我想你应该提到'mouseenter'以及男人！可能是'鼠标离开'需要的东西:) :) – 2012-07-27 20:14:40

它正在工作thanx！ – Mubeen 2012-07-27 20:15:33

这个工作，我upvoted，但我会用jQuery（'。placeholder'）。hover（function（）{}，function（）{}）;这里。 :) – 2012-07-27 20:15:56

关闭我的头顶，我不认为'show'和'hide'是传递给显示和隐藏函数的有效参数，除非您使用这些名称的自定义动画？

尝试只

jQuery('.play').show();

和

jQuery('.play').hide();

，除非你希望他们动画和缩小，然后用

jQuery('.play').show('slow');

和

jQuery('.play').hide('slow');

或等值:)

http://api.jquery.com/show/

来源

2012-07-27 20:14:16 nebulae

它与OPs Qn有什么不同？ – 2012-07-27 20:14:54

他将'show'和'hide'传递给show和hide方法。 – nebulae 2012-07-27 20:17:51

你确定你正在做这个权利，而且你真的需要使用noConflict？

jQuery(function(){ 
    jQuery('.placeholder').on({ 
     mouseenter: function(){ 
      jQuery('.play', this).show('slow'); 
     }, 
     mouseleave: function() { 
      jQuery('.play', this).hide('slow'); 
     } 
    }); 
});

或只是

jQuery('.placeholder').on('mouseenter mouseleave', function() { 
    jQuery('.play', this).toggle(); 
});

来源

2012-07-27 20:15:15 adeneo

JQuery鼠标悬停问题

回答

相关问题