Question

我正在尝试指定在悬停时显示链接的跨度。我在下面的代码执行此操作，但它适用于包含跨度的所有链接，而不仅仅是悬停项目。我想知道如何使用代码更具体。非常感谢任何帮助。

            $('ul#portfolio a').hover(function() {


                $('ul#portfolio a span').fadeIn();}, function() { $('ul#portfolio a span').fadeOut();


            });

Answer 1

请改用：

$(this).find('span').fadeIn();

// ...

$(this).find('span').fadeOut();

此处this表示收到该事件的a元素。 $(this)将其包装在jQuery对象中，find()^[docs]方法定位嵌套的span元素。

完整代码是：

$('ul#portfolio a').hover(function() {
    $(this).find('span').fadeIn();
}, function() { 
    $(this).find('span').fadeOut();
});

请注意fadeOut()^[docs]方法不只是设置不透明度。它还会在动画完成后隐藏元素。

您可能希望使用fadeTo()^[docs]方法：

$('ul#portfolio a').hover(function() {
    $(this).find('span').fadeTo( 600, 1 );
}, function() { 
    $(this).find('span').fadeTo( 600, 0 );
});

......或者你甚至可以这样做：

$('img').hover(function( e ) {
    $(this).fadeTo(600, e.type === 'mouseenter');
});

Answer 2

$('ul#portfolio a').hover(function() {
    $('span',$(this)).fadeIn();
}, function() {
    $('span',$(this)).fadeOut();
});

使用jquery在悬停链接上指定span

2 个答案: