javascript - 当鼠标悬停在没有CSS的标题上时，如何使缩略图图像消失？

我有一个简单的jQuery代码，当我将鼠标悬停在图片的div上时，可以通过隐藏一个图片并显示另一个图片来更改帖子的缩略图。当我将鼠标悬停在div类中标记的.thumbs上时，代码可以正常工作，但是我还想添加一个特性，这样当我将鼠标悬停在标题上时，同样的事情就会发生，缩略图也会改变。
问题是，如果我将.headline添加到jquery选择器中，则无法得到所需的结果，并且当我将鼠标悬停在缩略图上时，图像会发生更改。
我知道为什么会这样，但不知道怎么解决。因为我只想要我悬停在上面的帖子的图片来改变，所以我使用的是$(this)，而且因为图片都在.thumbs里面，所以没有问题。但标题不在.thumbs div中，因此，当我使用$(this).headline时，就像我所说的thumbs.headline不存在。我怎么能不把标题放在同一个div里，却仍然知道我在哪个帖子上徘徊？

  $('.thumbs').hover(
        function() {
           console.info('in');
    $(this).children('.first').css('display','none');
    $(this).children('.second').css('display','block')
                        },
        function() {
        console.info('out');
    $(this).children('.second').css('display','none');
    $(this).children('.first').css('display','block');
                    });

HTML代码：

<h2 class='headline'><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
    <?php if ( has_post_thumbnail() ){ ?>
    <a href="<?php the_permalink(); ?>"></a>
<div class='thumbs'>
     <div class='first'><?php the_post_thumbnail()?></div>
     <div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
                 </div>

最佳答案

如果包装它们不是一个选项，那么应该可以：

$('.thumbs').each(function () {

    var thisThumbAndHeadline = $(this).add($(this).prevAll('.headline:first'));

    thisThumbAndHeadline.hover(function () {
        console.info('in');
        thisThumbAndHeadline.children('.first').hide();
        thisThumbAndHeadline.children('.second').show()
    },

    function () {
        console.info('out');
        thisThumbAndHeadline.children('.first').show();
        thisThumbAndHeadline.children('.second').hide();
    }).trigger('mouseout');

})

关于javascript - 当鼠标悬停在没有CSS的标题上时，如何使缩略图图像消失？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18909651/