jQuery 选择器

Question

我无法在此处获取我的选择器。这个函数的作用是

1. 选择图像并在悬停时改变不透明度
2. 在悬停时选择定位标记并向上滑动

如果您可以帮助我选择特定于悬停在特定图像上的锚标记，那就太好了。我尝试了很多不同的方法，但我的语法不是很好。 谢谢！

$(document).ready(function() {
        $('.workitem_photo > img').each(function() {
            $(this).hover(function() {
                $(this).stop().animate({ opacity: 0.8 }, 500);
                $(this > '.workitem_projectdetails').show('500')
            },
           function() {
               $(this).stop().animate({ opacity: 1.0 }, 500);
               $(this > '.workitem_projectdetails').hide('500')
           });

        });
    });

这里是html：

<div class="workitem branding">
   <div class="workitem_photo"><img src="<?php echo home_url( '/wp-content/themes/po/' ); ?>images/workitem/branding-1000ikc.gif" alt="1000 Islands Kayaking" /></div>
   <div class="workitem_title">1000 Islands Kayaking Identity</div>
   <div class="workitem_description">Brand development for a Kayak tour operator.</div>
   <a class="workitem_projectdetails" href="#" style="display:none;">View Project Details</a>
</div>

这是一个工作版本my test site

Answer 1

我会使用这样的东西......

$(document).ready(function() {
    $('.workitem').each(function() {
        var projectDetails = $(this).find('> .workitem_projectdetails');

        $(this).find('.workitem_photo > img').hover(function() {
            $(this).fadeTo(500, .8);
            projectDetails.show('500');
        }, function() {
            $(this).fadeTo(500, 1);
            projectDetails.hide('500');
        });
    });
});

jsFiddle.

Answer 2

当您处于悬停功能时，$(this) 指的是 img，而不是 div。试试这个：

$(document).ready(function() {
    $('.workitem_photo > img').each(function() {
        $(this).hover(function() {
            $(this).stop().animate({ opacity: 0.8 }, 500);
            $(this).parent().parent().find('.workitem_projectdetails').show('500')
        },
       function() {
           $(this).stop().animate({ opacity: 1.0 }, 500);
           $(this).parent().parent().find('.workitem_projectdetails').hide('500')
       });

    });
});

这是jsfiddle。