javascript - 单个div的jquery悬停功能

Question

在我的画廊中，Div 通过循环生成。在那里，我想为特定（单个）Div 提供悬停效果。在我的代码中，当我将特定的 div 效果悬停在整个 div 中时。

我的代码

.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);
    })
});

有关更多详细信息，您可以查看项目： 项目

Answer 1

试试这个并检查这个小提琴可能会帮助你

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

Answer 2

那是因为您为所有 div 提供了相同的 ID。尝试给他们不同的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();  
});

不是来自您在问题部分中发布的代码。请看看那些东西。