单个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(); 
}); 

不是从你的问题部分发布的代码。请看看这些东西。