Question

所以我的情况是我有一个由ul li元素组成的画廊，我想这样做，当我将鼠标悬停在一个li jQuery上时，只选择那个li并在li本身内的div中淡入。我知道我可以使用ID标签完成它，但通过这样做，我将不得不为每个标签编写代码。我想知道是否有办法只选择你当前悬停的li，然后如何选择其中的div。

这是我到目前为止所拥有的：

$(function(){
    $("ul.gallery li div").hide();//starting state

     $("ul.gallery li").hover(function(){
        $('ul.gallery li > div').stop().fadeTo("200", 1.0);//hover state
     },function(){
     $('ul.gallery li > div').stop().fadeTo("200", 0.0);//mouse off state
     });
});

Answer 1

使用悬停事件处理程序中的this关键字来获取特定元素。即$("div", this).stop()....

编辑：实际上$(this).children("div")...更快。

Answer 2

$(function(){
    $("ul.gallery li div").hide();//starting state

    $("ul.gallery li").hover(function(){
        $(this).children('div').stop().fadeTo("200", 1.0);//hover state
    },function(){
        $(this).children('div').stop().fadeTo("200", 0.0);//mouse off state
    });
});

this引用当前的DOM上下文（li，因为hover函数的选择器是ul.gallery li），要获取jQuery对象，必须使用{{1 }}。 children方法为此元素中的所有子项提供选择器筛选。

请参阅此处的工作示例：http://jsfiddle.net/srakesh/hmD3V/

JQuery：如何在悬停时选择单个li？

2 个答案: