單個div的jquery懸停功能

Question

在我的畫廊中，Div通過循環生成。在那裏，我想給小型（單人）Div的懸停效果。在我的代碼中，當我將整個div展示的peticular div效果展開時。

mycode的

.spanstyle{opacity:1;} 

while (loop){ 
<div class="waz"> 
<span class="spanstyle"></span> 

</div> 
} 

$(".waz .spanstyle").each(function(i, val) { 
    $(this).mouseenter(function() { 
     $(this).stop().animate({ opacity: 1 }, 300); 
    }) 
    $(this).mouseleave(function() { 
     $(this).stop().animate({ opacity: .3 }, 100); 
    }) 
}); 

更多的細節，你可以檢查項目： Project

Answer 1

嘗試這一個，並檢查該fiddle可以幫助你

$(".waz").each(function(i, val) { 
    $(this).mouseenter(function() { 
     $('.spanstyle',this).show(); 
    }) 
    $(this).mouseleave(function() { 
     $('.spanstyle',this).hide(); 
    }) 
}); 

Answer 2

那是因爲你給同一個ID的所有的div。嘗試給他們不同的ID的

var i=0; 
while (loop){ 
<div id="'waz' + i"></div> 
i++; 
} 

您$("#waz .spanstyle").each(...

將成爲

$("div[id='^waz'] .spanstyle").each(... 

Answer 3

你有相同ID的多個元素。我建議是這樣的：

while (loop){ 
    <div onmouseover="a" onmouseout="b"></div> 
} 

function a(){ 
    $(this).find('.spanstyle').stop().animate({ opacity: 1 }, 300); 
} 

function b(){ 
    $(this).find('.spanstyle').stop().animate({ opacity: .3 }, 100); 
} 

編輯：

或者，你可以做你的代碼中的一些小變化：

$(".waz").each(function(i, val) { 
    $(this).mouseenter(function() { 
     $(this).children('.spanstyle').stop().animate({ opacity: 1 }, 300); 
    }) 
    $(this).mouseleave(function() { 
     $(this).children('.spanstyle').stop().animate({ opacity: .3 }, 100); 
    }) 
}); 

Answer 4

似乎有在HTML頁面中一些衝突。 WAZ是一些div的類名，有些是它的ID（id在文檔中應該是唯一的）。我認爲懸停效果從下面的代碼（在你的頁面提供）來：

$(".waz").hover(function(){ 
    $(".spanstyle").slideToggle(); 
}); 

不是從你的問題部分發布的代碼。請看看這些東西。