简体   繁体   English

悬停在元素及其所有子元素上的处理程序

[英]Handler for hovering over an element and all its children

The handler must operate when you hover over an element with a class D1 and when you hover over all his children. 当您将鼠标悬停在具有D1类的元素上并且将鼠标悬停在其所有子元素上时,处理程序必须进行操作。 How to do it? 怎么做? Tried through the cycle but confused. 尝试了整个周期,但感到困惑。

<div class="d1">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita inventore nobis cum itaque unde eos aliquam labore reiciendis iusto dolore ducimus tempore quidem et nisi debitis similique ea dignissimos ex.</p>
</div>

Link to the sandbox: Fiddle 链接到沙箱: 小提琴

You can use mouseenter and mouseleave instead of mouseover and mouseout . 您可以使用mouseentermouseleave代替mouseovermouseout These have the functionality you need, provided you're targeting the supported browsers (see links above). 如果您要定位受支持的浏览器(请参见上面的链接),它们将具有所需的功能。

Here's a working jsFiddle from your code: http://jsfiddle.net/rgthree/rs6qm9v5/2/ 这是您代码中的有效jsFiddle: http : //jsfiddle.net/rgthree/rs6qm9v5/2/

展示<div>当悬停在另一个 div 及其子项上时</div><div id="text_translate"><p>我有一个 HTML div,里面有孩子。 我有一个附加到 div 的 jQuery 鼠标悬停事件。 鼠标悬停时,我显示另一个 div,鼠标悬停时,我隐藏它。</p><p> 但是,当我将鼠标悬停在“premiumlink”div 上时,一切正常,但是当我将鼠标移到 div 的一个子项上时,有条件显示的 div 会隐藏,但随后 jQuery 发现父 div 仍在悬停,所以它再次显示它。 然后,如果我将 cursor 移回父 div,则该 div 被隐藏然后再次显示。</p><p> 我怎样才能让鼠标悬停和鼠标悬停适用于所有孩子,而不是这个跳跃的 state?</p><p> 这是我的 HTML</p><pre> &lt;div class="platinumlevel" id="premiumlink"&gt; &lt;h1&gt; &lt;img src="~/Content/Images/colorworld.png" alt="Logo" class="eventimage" /&gt; &lt;a href="@Url.Action("Exhibitor1Attendee", "Home")" class="landing"&gt;Company Name&lt;/a&gt; &lt;/h1&gt; &lt;div id="demopreview" style="display: none;"&gt; I should be displayed when "premiumlink" and all it's children are mouseovered &lt;/div&gt; &lt;/div&gt;</pre><p> JS</p><pre> $("#premiumlink").mouseover(function () { $('#demopreview').show(1000); }).mouseout(function () { $('#demopreview').hide(1000); });</pre></div> - Display <div> when hovering over another div and its children

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 展示<div>当悬停在另一个 div 及其子项上时</div><div id="text_translate"><p>我有一个 HTML div,里面有孩子。 我有一个附加到 div 的 jQuery 鼠标悬停事件。 鼠标悬停时,我显示另一个 div,鼠标悬停时,我隐藏它。</p><p> 但是,当我将鼠标悬停在“premiumlink”div 上时,一切正常,但是当我将鼠标移到 div 的一个子项上时,有条件显示的 div 会隐藏,但随后 jQuery 发现父 div 仍在悬停,所以它再次显示它。 然后,如果我将 cursor 移回父 div,则该 div 被隐藏然后再次显示。</p><p> 我怎样才能让鼠标悬停和鼠标悬停适用于所有孩子,而不是这个跳跃的 state?</p><p> 这是我的 HTML</p><pre> &lt;div class="platinumlevel" id="premiumlink"&gt; &lt;h1&gt; &lt;img src="~/Content/Images/colorworld.png" alt="Logo" class="eventimage" /&gt; &lt;a href="@Url.Action("Exhibitor1Attendee", "Home")" class="landing"&gt;Company Name&lt;/a&gt; &lt;/h1&gt; &lt;div id="demopreview" style="display: none;"&gt; I should be displayed when "premiumlink" and all it's children are mouseovered &lt;/div&gt; &lt;/div&gt;</pre><p> JS</p><pre> $("#premiumlink").mouseover(function () { $('#demopreview').show(1000); }).mouseout(function () { $('#demopreview').hide(1000); });</pre></div> - Display <div> when hovering over another div and its children 悬停其子元素时保留父元素的CSS样式 - Keep CSS style of a parent element while hovering its children elements 将鼠标悬停在其对应的图例上时,突出显示图表元素 - Highlight chart element when hovering over its corresponding legend Item 模拟将鼠标悬停在元素上 - Emulate hovering over an element 将鼠标悬停在子元素上时如何 select 所有子元素 - How to select all children elements when hovered over a children element 使用 jQuery 检测悬停在元素上的 IF - Detect IF hovering over element with jQuery 将鼠标悬停在某个元素上会使其生成动画,而只是更改其CSS属性 - Hovering over an element causes it to animate rather just change its CSS properties 删除元素及其所有子元素的内联CSS的最快方法? - Fastest way to remove inline CSS of an element and all its children? TypeScript或JS-如何选择元素及其所有子元素进入HTMLCollection? - TypeScript or JS- How to select an element and all its children into a HTMLCollection? 从元素及其子元素中删除所有CSS属性 - Remove all CSS properties from an element and its children
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM