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鼠標懸停問題

回答

相關問題