jQuery的鼠標懸停效果問題

假設我有4個imagedivs（imgdiv1，imgdiv2，imgdiv3，imgdiv4）和4個contentdivs（condiv1 condiv2 condiv3，condiv4）和1個主要內容div（maincon）所有contentdivs（除主要內容div ）需要保持「隱藏」或不可見。當我在imagediv上進行鼠標懸停時，每個騙子都會顯示淡入淡出效果。所有contentdivs都在同一個地方，而imagedivs是一種菜單。jQuery的鼠標懸停效果問題

例如：如果我將鼠標放在imgdiv1上，condiv1將顯示平滑淡入效果。當我的鼠標離開imgdiv1時，condiv1應該淡入淡出效果，imgdiv2，imgdiv3和imgdiv4也一樣。 maincon div將一直存在，並且condivs應該通過imagedivs上的mousover觸發maincon。

我該如何使用jQuery實現這一點？什麼是最好的方法？

來源

2009-12-14 Bruno

我不是一個與jQuery親，我正在尋找一些指導如何實現這 – Bruno 2009-12-14 20:24:50

您可以使用懸停功能
$('#imgdiv1').hover(function(){ /*fade in code*/},function(){/*fade out code*/});

或者你可以看看jQueryUI的，並使用標籤控件。

來源

2009-12-14 20:27:36 RHicke

哪一個是你認爲最好的？ – Bruno 2009-12-14 20:32:38

老實說，我從來沒有使用Tabs小部件，我只用jquery.com上的演示玩過，它似乎很有用，但我可以告訴你，懸停功能使用非常簡單，可以隨時添加到元素中簡單的只是檢查規格http://docs.jquery.com/Events/hover#overout – RHicke 2009-12-14 23:10:04

你看過hover？它結合了鼠標輸入/鼠標輸出事件處理，最大限度地減少了你需要編寫的代碼。

來源

2009-12-14 20:25:25

您可以使用hover（）在兩個函數中切換，一個在mouseenter上，另一個在鼠標上離開imgdiv。爲了實用性，給你的imgdiv增加一個類：「imgdiv」。這允許您創建一次行爲並通過each（）;將其附加到所有imgdiv元素。循環。

另外，給所有contentdiv元素提供一個「contentdiv」類，以便您可以通過一次調用隱藏它們。

$(document).ready(function(){ 
    // hide all that should be hidden 
    $('div.contentdiv').hide(); 
    var divToShow= ''; 
    var strlength = 10; 
    $('div.imgdiv').each(function(){ 
      $(this).hover(function(){ 
       //find which contentdiv to show 
       var thisId= $(this).attr('id'); 
       strlength = thisId.length; 
       divToShow = 'condiv'+thisId.charAt(strlength-1); 
       $(divtoShow).stop().fadeIn('slow'); 
       } 
       , 
       function(){ 
       // when mouse leaves imgdiv... 
       $(divtoShow).stop().fadeOut('slow'); 
       } 
      ); 
     }); 

});

來源

2009-12-14 20:30:21 pixeline

jQuery的鼠標懸停效果問題

回答

相關問題