如何使用JQuery只显示div的子元素？

Question

所以我有这个jquery函数,它应该在悬停时显示一个类的隐藏跨度.如何设置该功能,使其仅显示所选div的子跨度(而不是显示页面上的所有跨度)？

这是我的jquery函数:

$(".thumb").hover(
    function() {
       $(".blurb").show();
    },
    function(){
       $(".blurb").hide();
    }
);

你可以在这里查看jsfidde.谢谢!

Answer 1

这this是为了什么!

$(".thumb").hover(
    function() {
       $(this).children('.blurb').show();
    },
    function(){
       $(this).children('.blurb').hide();
    }
);

Answer 2

使用$(this).children()而不是再次执行全局查询:

$(".thumb").hover(function() {
    $(this).children().show();
}, function() {
    $(this).children().hide();
});

工作演示:http://jsfiddle.net/h5x3f/2/

注意:如果您不关心支持Internet Explorer 6,您可以完全避免使用jQuery/JavaScript并使用CSS的:hover伪类,这甚至可以在禁用JS的情况下使用.或者您可以使用类似ie-7.js的垫片来处理:hover.看一下这个小提琴的变化就是一个例子.