給多個div相同的功能

我想用同一個.class創建多個縮略圖。縮略圖div包含3個其他div。第一個是圖像，第二個是鼠標中出現的描述，第三個是改變不透明度的條形圖。給多個div相同的功能

當鼠標懸停在.thumbnail之上時，兩個元素都應執行其功能。

我的問題是，現在每個縮略圖都執行該功能，因此每個縮略圖現在都會突出顯示。我怎樣才能改變它，這樣只有一個縮略圖在它上面懸停時突出顯示？

HTML：

<div class="thumbnail">  
    <div class="thumbnail_image"> 
     <img src="img/Picture.png"> 
    </div> 

    <div class="thumbnail_describe"> 
     <p>Description</p> 
    </div> 

    <div class="thumbnail_footer"> 
     <p>Text</p> 
    </div> 
</div>

的jQuery：

$(document) .ready(function() { 

var $thumb = $('.thumbnail') 
var $thumb_des = $('.thumbnail_describe') 
var $thumb_ft = $('.thumbnail_footer') 

//mouseover thumbnail_describe 
$thumb.mouseenter(function() { 
    $thumb_des.fadeTo(300, 0.8); 
}); 

$thumb.mouseleave(function() { 
    $thumb_des.fadeTo(300, 0); 
}); 


//mouseover thumbnail_footer 
$thumb.mouseenter(function() { 
    $thumb_ft.fadeTo(300, 1); 
}); 

$thumb.mouseleave(function() { 
    $thumb_ft.fadeTo(300, 0.8); 
}); 

});

來源

2014-01-23 alex

您的代碼行爲如此，因爲您將fadeTo函數應用於$thumb_des和$thumb_ft選擇器，其中分別包含頁面的所有描述和頁腳。

相反，您應該在mousenter或mouseleave函數中選擇觸發鼠標事件的縮略圖的描述和頁腳。

你可以改變來優化你的代碼的另一件事是僅在描述和在同一時間頁腳使用此事件後，監聽功能，並執行這兩個操作：

$thumb.mouseenter(function() { 
    var $this = $(this) 
    $this.find('.thumbnail_describe').fadeTo(300, 0.8); 
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});

完全工作的jsfiddle： http://jsfiddle.net/Yaz8H/

來源

2014-01-23 23:47:35

非常感謝！ – alex

當你這樣做：

$thumb_des.fadeTo(300, 0.8);

它消失在$ thumb_des所有節點。你想要的只是淡入與$ thumb中正確節點相對應的那個。

試試這個：

for (i = 0; i < $thumb.length; i++) 
{ 
    $thumb[i].mouseenter(function (des) { 
     return function() { 
      des.fadeTo(300, 0.8); 
     }; 
     }($thumb_des[i])); 
    }); 
}

來源

2014-01-23 23:31:38 pid

你要訪問特定縮略圖的子對象，像這樣的工作：

$(this).children('.thumbnail_describe').fadeTo(300, 0.8);

這裏是一個fiddle example。

來源

2014-01-23 23:31:45 Goose

給多個div相同的功能

回答

相關問題