正文 

当前位置： 首页 > 知识 >

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

     2023-05-08     168

关键词：

【中文标题】当鼠标悬停在没有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() 方法显示隐藏的选定元素

【讨论】：

当鼠标悬停在 DIV 上时，如何使某些控件可见并与 DIV 重叠？ [关闭]

】当鼠标悬停在DIV上时，如何使某些控件可见并与DIV重叠？[关闭]【英文标题】：HowtomakesomecontrolsvisibleandoverlappingaDIVwhenmousehoversonit?[closed]【发布时间】：2012-12-2007:22:20【问题描述】：我在CSS和JavaScript方面不是那么专业。我正在... 查看详情

将鼠标悬停在地图上时，如何使地图的区域改变颜色？

】将鼠标悬停在地图上时，如何使地图的区域改变颜色？【英文标题】：HowcanImakethemap\'sregionschangecolorwhenhoverthemouseoverit?【发布时间】：2015-02-1318:24:02【问题描述】：我正在使用来自codecanyon的interactivemap。我想进行更改，以便当... 查看详情

CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接

】CSS导航：当鼠标悬停在图标上时，图标应替换为文本链接【英文标题】：CSSNavigation:Whenhoveringovericon,iconshouldbereplacedwithtextlink【发布时间】：2013-05-1914:17:06【问题描述】：我的导航栏中有这样的图标(http://d.pr/i/NP2T)。当我将鼠标... 查看详情

将鼠标悬停在缩略图上以启动新图像；悬停结束后新图像仍然存在

】将鼠标悬停在缩略图上以启动新图像；悬停结束后新图像仍然存在【英文标题】：Hoveroverthumbnailimagetolaunchnewimage;newimagepersistsafterhoveringends【发布时间】：2014-09-1006:41:12【问题描述】：我有一张缩略图。将鼠标悬停在此图像上... 查看详情

java示例代码_将鼠标悬停在缩略图上时显示完整图像作为弹出/覆盖

java示例代码_将鼠标悬停在缩略图上时显示完整图像作为弹出/覆盖 查看详情

悬停在文本上时，悬停效果消失

...:08:30【问题描述】：话题在说——我的问题如下：当我将鼠标悬停在我的图片上时，我希望有一个颜色叠加层图片上的文字应该在悬停前后都可见，没有任何变化问题：当我将鼠标悬停在文本上时，颜色悬停覆盖消失（当我在Div... 查看详情

当用户将鼠标悬停在滑块上时，使光标成为手

】当用户将鼠标悬停在滑块上时，使光标成为手【英文标题】：Makethecursorahandwhenauserhoversoveraslider【发布时间】：2019-09-2902:36:57【问题描述】：https://ilanwittenberg.com/的主页显示全屏滑块。不幸的是，一些PC用户无法点击屏幕进入... 查看详情

用于离开悬停的 CSS 伪类

...描述】：我的网站上有一个不错的小悬停效果，当用户将鼠标悬停在链接上时，它会快速过渡。但是当用户将鼠标悬停在盒子上时，阴影（和其他特征）会立即消失，而不是淡出。有没有办法让属性同时淡入和淡出，也许使用某... 查看详情

当鼠标悬停在它后面的东西上时 CSS 菜单关闭

】当鼠标悬停在它后面的东西上时CSS菜单关闭【英文标题】：CSSMenuClosingWhenMouse-OverSomethingBehindIt【发布时间】：2012-10-1000:37:47【问题描述】：我有一个纯CSS导航菜单，其下拉部分基于一些自动菜单创建工具并经过大量编辑。以前... 查看详情

仅当我将鼠标悬停在其上时如何使图像出现

】仅当我将鼠标悬停在其上时如何使图像出现【英文标题】：HowtomakeimageappearonlywhenIhoveronit【发布时间】：2020-02-0810:31:23【问题描述】：我希望我的图像仅在我将鼠标悬停时出现，我尝试将它放在样式部分但它不起作用。这段代... 查看详情

悬停在链接上时如何反转整个页面的颜色

...我想反转整个页面（文本、图像、背景）的颜色。只需将鼠标悬停在按钮上，就可以将其想象为暗模式预览。我知道css过滤器：invert(100%);但不确定如何使用CSS使整个页面基于一次悬停反转。感谢您的 查看详情

ASP 动态菜单 子菜单 鼠标悬停在子菜单上时消失。

】ASP动态菜单子菜单鼠标悬停在子菜单上时消失。【英文标题】：ASPDynamicMenuSubMenuDisappearsonmouseoverofsubmenu.【发布时间】：2014-04-2718:59:00【问题描述】：我被要求更新和解决问题的网站的子菜单消失时遇到问题（创建的员工不再... 查看详情

当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

】当我将鼠标悬停在另一个div上时，如何使文本出现在一个div中？【英文标题】：HowdoImaketextappearinadivwhenIhoveroveranother?【发布时间】：2021-02-0313:38:15【问题描述】：我已经为我的网站创建了一个主页，其中包含所有方面的概述。... 查看详情

通过缩略图悬停图像交换？

...sually-minded.com/portfolio-project.php在上面的链接中，当用户将鼠标悬停在任何缩略图上时，主图像将被交换。任何人都可以为我指出正确的方向以获取此教程吗？【问题讨论】：【参考方案1】：带有html：<imgid="targe 查看详情

悬停后div项目消失

...我正在尝试使用css在侧栏导航栏上创建嵌套链接。当我将鼠标悬停在主链接上时，会显示子链接。但是当我将鼠标悬停在子链接上时，它的子链接变得可见，但我无法单击/悬停在它们上，因为它们正在消失。注意：我对SCSS/CSS及... 查看详情

Google chrome：当鼠标悬停在表格单元格上时如何显示全文

】Googlechrome：当鼠标悬停在表格单元格上时如何显示全文【英文标题】：Googlechrome:howtodisplayfulltextwhenthemousehoversoveratablecell【发布时间】：2018-12-0618:11:59【问题描述】：预期行为我的网页上有一个表格。在某些表格单元格中，它... 查看详情

将鼠标悬停在css上时如何暂停幻灯片自动播放？

】将鼠标悬停在css上时如何暂停幻灯片自动播放？【英文标题】：Howtopauseslidesautoplaywhenyouhoveroverincss?【发布时间】：2021-10-1815:53:06【问题描述】：我有两个问题正在尝试解决，但没有成功。我正在尝试在动画中放置超过5张图片... 查看详情

我想让一个词在鼠标悬停期间执行 CSS 动画后消失

】我想让一个词在鼠标悬停期间执行CSS动画后消失【英文标题】：IwanttomakeaworddisappearafteritperformsaCSSanimationduringamouseover【发布时间】：2015-07-3017:42:15【问题描述】：我试图让我的代码播放动画（一个单词在消失之前掉到页面底部... 查看详情