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

Posted 2023-05-08

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

【英文标题】：how can I make thumbnail image disappear when the mouse hovers over the title without css?

【发布时间】：2013-09-25 10:07:08

【问题描述】：

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

问题是，如果我将 .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>

【问题讨论】：

能否提供您的 HTML 代码？

@MarsOne 我刚刚编辑并添加了 HTML 代码

【参考方案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');

)

【参考方案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');
    
)

【参考方案3】：

试试 jQuery：

hide() 方法隐藏被选元素

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