Javascript 当鼠标悬停在没有css的标题上时，如何使缩略图消失？

我有一个简单的jQuery代码，当我将鼠标悬停在图像的

div

上时，通过隐藏一个图像并显示另一个图像来更改帖子的缩略图。当我将鼠标悬停在

.thumbs

类中标记的

div

s上时，代码工作正常，但我还想添加一个功能，以便当我将鼠标悬停在标题上时，同样的事情发生，缩略图也会更改

问题是，如果我将

.headline

添加到jquery选择器中，我就不会得到想要的结果，当我将鼠标悬停在缩略图上时，图像也会发生变化

我知道这是为什么，但不知道如何解决它。因为我只想更改我悬停在上面的帖子的图像，所以我使用的是

$（this）

，而且图像都在

中。拇指
没有问题。但是标题不在
.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>

一个简单的解决方案是将侦听器应用到围绕标题和拇指的包装器


HTML
试试jQuery：


方法隐藏选定的元素

方法显示隐藏的选定元素

如果不选择包装它们，这应该可以：

$('.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');

})

你还可以提供你的HTML代码吗？@MarsOne我刚刚编辑并添加了HTML代码
$('.wrap').hover(
    function() {
        console.info('in');
        $(this).find('.first').css('display','none'); 
        $(this).find('.second').css('display','block')
    },
    function() {
        console.info('out');
        $(this).find('.second').css('display','none'); 
        $(this).find('.first').css('display','block');
    }
)

$('.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');

})