Jquery hover函数用于单个div

dnph8jn4  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(110)

在我的画廊里,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);
    })
});

字符串
有关详细信息,您可以查看项目:Project

wxclj1h5

wxclj1h51#

试试这个,检查这个fiddle可能会帮助你

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

字符串

o3imoua4

o3imoua42#

这是因为您为所有div提供了相同的ID。给他们不同的身份证

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

字符串
你的$("#waz .spanstyle").each( ...
将成为

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

s2j5cfk0

s2j5cfk03#

有多个元素具有相同的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);
    })
});

q3qa4bjr

q3qa4bjr4#

你的HTML页面似乎有一些冲突。WAZ对于某些div是类名,对于某些div是ID(ID在文档中应该是唯一的)。我认为悬停效果来自下面的代码(在您的页面中可用):

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

字符串
而不是你在问题区贴出的代码。请看一下那些东西。

相关问题