正文 

当前位置： 首页 > 问答 >

jQuery：将鼠标悬停在其上时保持切换的子元素打开

     2023-05-08     267

关键词：

【中文标题】jQuery：将鼠标悬停在其上时保持切换的子元素打开【英文标题】：jQuery: keep toggled child element open when hovering over it 【发布时间】：2011-05-02 13:41:03 【问题描述】：

我的问题类似，但与jquery-hover-menu-when-hovering-over-child-menu-disappears不同。

我最初在li.item 上进行了悬停事件，这有点古怪，但做了我需要它做的事情。我将悬停切换到跨度，以便事件会在文本块上触发，而不是在列表块上触发，这会扩展列表的整个宽度。

我想要达到的效果是当悬停在ul.sub 上时。我希望它从span.text 的悬停继续播放队列中的动画，它正在显示它，但也保持打开状态。

发生的事情是鼠标离开了 span，所以 li.item 正在触发触发器的 mouseout 部分。

jsFiddle Page

HTML

   <ul id="main">
       <li class="head">Title Bar</li>
       <li class="item odd">
           <span class="text">A</span>
           <ul class="sub">
               <li>1</li>
               <li>2</li>
           </ul>
       </li>
       <li class="item even">
           <span class="text">B</span>
           <ul class="sub">
               <li>3</li>
               <li>4</li>
           </ul>
       </li>
       <li class="item odd">
           <span class="text">C</span>
           <ul class="sub">
               <li>5</li>
               <li>6</li>
           </ul>
       </li>
       <li class="item even">
           <span class="text">D</span>
           <ul class="sub">
               <li>7</li>
               <li>8</li>
           </ul>
       </li>
   </ul>

CSS

/* colors used are not for production; they are
   used only to enhance the example's visual distinction */

   #mainwidth:10em;
   .head,.itemborder:1px solid black;padding:.5em;
   .headfont-weight:bold; background:#336; color:#fff; cursor:pointer;
   .itembackground:#f90;
   .subdisplay:none;
   .sub lipadding-left:1em;
   .text,.subcursor:pointer;

JavaScript

   $(document).ready(function()
      // specific here because of other divs/list items

      $('#main li.item span.text').hover(function()
         $(this).siblings().stop(true,true).toggle('slow');     
      );       

      $('li.head').hover(function()
         $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
      );
   );

编辑：

我认为这些方面的东西是我需要的，但是从 sub 到 span 时动画会重新触发。

$(document).ready(function()
   // specific here because of other divs/list items

   $('#main li.item span.text').hover(
       function()$(this).siblings().stop(false,true).show('slow');
      ,function()$(this).siblings().stop(true,true).hide('slow');     
   );    

   $('#main li.item ul.sub').hover(
        function()$(this).stop(false,true).show();
       ,function()$(this).stop(false,true).hide('slow');
   );    

   $('li.head').hover(function()
      $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
   );
);

【问题讨论】：

【参考方案1】：

将hover 行为拆分为两个组成部分，mouseenter 和mouseleave。还将toggle() 拆分为show() 和hide()。将mouseenter 绑定到span.text，将mouseleave 绑定到li.item：

$(document).ready(function() 
    // specific here because of other divs/list items
    $('#main li.item span.text').mouseenter(function() 
        $(this).siblings().stop(true, true).show('slow');
    );

    $('#main li.item').mouseleave(function() 
        $(this).children("ul").stop(true, true).hide('slow');
    );

    $('li.head').hover(function() 
        $(this).parent().find('ul.sub').stop(true, true).toggle('slow');
    );
);

这样，悬停不会由空格触发，这是您想要的。

【讨论】：

我刚刚发布了类似的内容：查看编辑；但是，我认为您的解决方案可以使从跨度到潜艇再返回时一切都更加流畅。 好吧，你仍然调用hover()，所以你不能拆分mouseenter和mouseleave行为并将它们绑定到两个不同的元素，这是我回答的关键。 @Frederic - 是的 :) 没错，只是说我要去同一个地方，但你比我先到了那里。我会先测试它然后回来加/检查你=] 好，现在你正在这样做，但我应该指出我的答案没有表现出你的问题：从 sub 到 span 时动画不会重新触发 :) 您是否有一份可以工作的 jsFiddle 副本，一切看起来都有效，但由于某种原因它没有触发节目。 编辑： 没关系，“mouseenter”中的拼写错误两个“e”

Javascript 或 Jquery 检查是不是将鼠标悬停在元素上

】Javascript或Jquery检查是不是将鼠标悬停在元素上【英文标题】：JavascriptorJquerycheckifhoveringoveranelementJavascript或Jquery检查是否将鼠标悬停在元素上【发布时间】：2017-09-2413:17:54【问题描述】：目标是当鼠标悬停在多个元素上时，每... 查看详情

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

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

jQuery - 当鼠标悬停在元素上时，如何继续动画？

】jQuery-当鼠标悬停在元素上时，如何继续动画？【英文标题】：jQuery-HowcanIcontinueananimationwhilethemousehoversoveranelement?【发布时间】：2011-01-2020:19:07【问题描述】：我需要一种方法来执行某种“whileonmouseover”功能，以便在鼠标悬停... 查看详情

当我将鼠标悬停在链接上时希望切换图像

】当我将鼠标悬停在链接上时希望切换图像【英文标题】：LookingtoswitchimagewhenIhoveroveralink【发布时间】：2021-03-0409:20:46【问题描述】：我一直在努力解决这个问题，我一直在寻找其他类似的问题，但还没有找到我的问题的答案。... 查看详情

使用 jQuery 将鼠标悬停在相邻文本上时更改图标的颜色

】使用jQuery将鼠标悬停在相邻文本上时更改图标的颜色【英文标题】：ChangeColorofIconWhenHoveringOverAdjacentTextWithjQuery【发布时间】：2021-05-0115:09:40【问题描述】：我见过thisarticle，但我想用JavaScript更改图标的颜色。尝试编写一个函... 查看详情

将鼠标悬停在按钮上时如何更改 div 的文本？

】将鼠标悬停在按钮上时如何更改div的文本？【英文标题】：HowdoIchangethetextofadivwhenIhoveroverabutton?【发布时间】：2014-08-0717:01:06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在... 查看详情

鼠标离开 svg 元素时未删除悬停变换，仅限 Safari

】鼠标离开svg元素时未删除悬停变换，仅限Safari【英文标题】：Hovertransformnotremovedwhenmouseleavessvgelement,Safarionly【发布时间】：2021-11-0715:13:53【问题描述】：我有一段最少的代码，当将鼠标悬停在矩形上时，它应该会导致它发生变... 查看详情

jQuery动画无法悬停

】jQuery动画无法悬停【英文标题】：jQueryanimatenotworkingonhover【发布时间】：2015-03-1709:01:00【问题描述】：为此拉我的头发，看起来很简单，但无论出于何种原因都行不通。当您使用jquery将鼠标悬停在父元素上时，我正在尝试为元... 查看详情

jQuery CSS 悬停

】jQueryCSS悬停【英文标题】：jQueryCSSHover【发布时间】：2010-12-1103:42:55【问题描述】：我有一个CSS菜单，当将鼠标悬停在父li上时，它会设置其颜色，它是子ul（子菜单）。基本上，当您将鼠标悬停在菜单上时，它会改变颜色并保... 查看详情

通过 CSS 将鼠标悬停在父元素上时显示 :after

】通过CSS将鼠标悬停在父元素上时显示:after【英文标题】：Show:afterwhenhoveringovertheparentelementviaCSS【发布时间】：2013-03-0711:57:06【问题描述】：当我将鼠标悬停在父元素本身上时，是否可以display:block;:after伪元素？#myDivposition:relativ... 查看详情

悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

】悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果【英文标题】：HoverononeelementcauseshoveringeffectonotherelementwithjQuery【发布时间】：2012-03-1823:11:11【问题描述】：当我将鼠标悬停在元素上时，我必须创建带边框的效果，... 查看详情

将鼠标悬停在图像上时需要 CSS 效果，以获取另一个图像和/或文本以显示在其上方

】将鼠标悬停在图像上时需要CSS效果，以获取另一个图像和/或文本以显示在其上方【英文标题】：NeedCSSeffectwhenhoveringoveranimage,togetanotherimageand/ortexttodisplayaboveit【发布时间】：2012-02-1719:06:09【问题描述】：我公司的网站上有10个... 查看详情

悬停在下拉菜单上时保持主导航项悬停 CSS

...拉CSS动画和主导航元素（下划线）上的CSS过渡。当用户将鼠标悬停在子菜单/下拉菜单上时，是否可以在主导航上加下划线？在这种情况 查看详情

jQuery - 在悬停另一个元素时显示一个元素

】jQuery-在悬停另一个元素时显示一个元素【英文标题】：jQuery-Displayanelementonhoverofanother【发布时间】：2013-06-3012:03:06【问题描述】：如果需要显示的元素是悬停的子元素，这可以在CSS中轻松完成，但事实并非如此；它位于文档... 查看详情

将鼠标悬停在按钮上时仅更改部分文本

】将鼠标悬停在按钮上时仅更改部分文本【英文标题】：onlypartialtextchangeonhoveroverbutton【发布时间】：2013-09-1811:06:24【问题描述】：当鼠标悬停在按钮上时，我希望按钮中文本的字体颜色变为白色且不带下划线。目前，文本颜色... 查看详情

将鼠标悬停在 ASP.NET 按钮上时显示注释

】将鼠标悬停在ASP.NET按钮上时显示注释【英文标题】：DisplaynoteswhenhoveringoverASP.NETbuttons【发布时间】：2012-10-0602:37:11【问题描述】：我的页面上有许多按钮，我希望在其旁边显示一些注释，说明当它们悬停在任何特定按钮上时... 查看详情

仅使用 CSS，将鼠标悬停在另一个元素上时显示 div

】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在&lt;a&gt;元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情

Jquery：当悬停在菜单项上时，显示文本

】Jquery：当悬停在菜单项上时，显示文本【英文标题】：Jquery:WhenHoveronMenuItem,DisplayText【发布时间】：2010-11-1914:22:22【问题描述】：我是JQuery新手，但希望在我正在构建的网站中使用它。当用户将鼠标悬停在具有li类hovertriggerssubh... 查看详情