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

Question

我有一个简单的jQuery代码，当我将鼠标悬停在图片的div时，可以通过隐藏一个图片并显示另一个图片来更改帖子的缩略图。 当我将鼠标悬停在.thumbs类中的div时，代码可以正常工作，但是我还想添加一个功能，以便当我将鼠标悬停在标题上时，会发生相同的事情并且缩略图也会更改。

问题是，如果将.headline添加到jquery选择器中，则不会得到想要的结果，并且当我将鼠标悬停在缩略图上时，图像.headline更改。

我知道为什么会这样，但不知道如何解决。 因为我只希望将悬停的帖子图像更改，所以我使用$(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>

Answer 1

如果包装它们不是一个选择，这应该可以工作：

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

})

Answer 2

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

http://jsfiddle.net/A8UP8/

HTML

<div class="wrap">
    <h2 class='headline'> ... </h2>

    <div class='thumbs'>
        <div class='first'> ... /div>
        <div class='second'> ... </div>
    </div>
</div>

JavaScript的

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

Answer 3

试试jQuery：

• hide()方法隐藏选定的元素

• show()方法显示隐藏的选定元素