Prevent kids from disrupting the parent's hover state. (or how to use .stop(false,true) to halt a CSS transition)

When using jQuery's .animate() function to animate elements, it is important to use .stop(false,true) to prevent any unexpected animation issues.

For example, I recently attempted to create a navigation menu that appears on hover of certain sections. You can see a demo here:

http://jsfiddle.net/meo/Kbeg8/

If you slowly move your cursor out of the gray element at the top, you may notice an infinite animation loop occurring. This is because the element flying in is a child of the element triggering the animation.

As I have encountered this issue before, I am curious if there is a way to address it using pure CSS (such as preventing children from triggering parent transitions). If not, how would you recommend solving this problem with JavaScript?

css

Answer №1

Indeed, there exists a method using pure CSS3 to achieve this. The key property to utilize is pointer-events

Simply including

nav ul {
    pointer-events:none;
}
nav:hover ul {
    pointer-events:auto;
}

appears to resolve the issue in my experience with Chrome 14.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic parallax or stacked vertical text animation

I am attempting to replicate the text effect found on . The text is centered both vertically and horizontally within each div, but as you scroll down, the top position shifts creating a parallax effect. As you continue scrolling, the text transitions to th ...

jquerycssparallax

Avoiding the stretching of images in a bootstrap carousel is a top priority

I'm facing an issue with my Bootstrap 4 carousel that takes up a large portion of the page. The images are loaded through an ajax request once received. Since all the photos are taken on a phone, they are either in landscape or portrait style. The p ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to adjust the padding on the left and right of the Bootstrap navbar logo and menu items?

I am currently facing an issue with the alignment of the logo and menu on my website. They are currently aligned to the far edges of the screen, and I would like them to remain a set percentage distance away from the extremes, rather than an absolute dista ...

javascripthtmljquerycssbootstrap-4

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax

Designing the Mailchimp signup form with React styling techniques

I downloaded the NPM React module for Mailchimp from this link: https://www.npmjs.com/package/react-mailchimp-form. It works well and provides all the necessary forms, but I'm having trouble customizing its style. The documentation suggests adding a ...

cssreactjsmailchimp

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

How can I achieve a fade-in effect whenever the flag image is clicked?

A unique "international" quotes script has been created, showcasing Dutch, English, German, and French quotes. The script displays different quotes every day, with a draft-result visible in the upper right corner of this page ... The code used for this sc ...

javascripthtmlcssfadein

Organize columns on mobile devices using Materialize

I'm currently working with the materialize framework and am attempting to change the order of columns on mobile view. Specifically, I want the BUY BUTTON to appear before the CONTENT section on phones. I've been experimenting with pull and push b ...

cssmaterialize

Quick way to include id="" and class="" attributes to HTML elements using Sublime Text 2

Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag? ...

htmlcsssublimetext2shortcut

Refresh the block's content seamlessly without the need for a page reload

Within the index.html page There exists a block called content that contains various content blocks. An additional navigation menu with numerous links is present. It is important that when you click on a menu link, the content within the content block re ...

javascriptjqueryhtmlcssajax

Aligning an image vertically within a division

I am currently working on aligning images vertically within an image rotator (SlideDeck). At the moment, all the images are aligned at the top but I need them to be centered. The heights of the images vary. I have tried several methods, including absolute ...

csshtmlvertical-alignment

The CSS grid functionality seems to be malfunctioning on a specific page, yet it operates perfectly on other

I'm currently working on my Portfolio application, but I'm facing an issue on the home page where the grid layout is not functioning properly. The different div tags are overlapping each other instead of displaying correctly. https://i.sstatic.n ...

htmlcssreactjs

What sets apart elevation from z-index in material-ui?

As I delved into the material-ui documentation, I came across an interesting snippet: Various components in Material-UI make use of z-index, a crucial CSS property that aids in organizing content along a third axis. Material-UI employs a predefined z-in ...

reactjscssmaterial-uiz-index

Can you tell me what is creating the space between the elements in this form?

For an example, take a look at this link: I am puzzled by the gap between the form-group and the button, as well as between the different form-groups. When using Bootstrap 4 with flexbox activated, all my elements (inputs and buttons) collapse without any ...

csstwitter-bootstrapgoogle-chrome-devtools

The button will remain inactive until a selection is made from the drop-down menu, following Material

Is there a way to use Material Design css and jquery to disable the next button until a value is selected from a drop down list? <div class="mdl-selectfield mdl-js-selectfield"> <select class="mdl-selectfield__select" id="ad_duration"> ...

jqueryhtmlcssmaterial-design

Modifying search criteria using JavaScript

Yesterday, I posted a topic on Stack Overflow about how to change the search value in Wordpress using a drop-down selector. Initially, I implemented it with the help of Fredrik, but later I changed my approach. Instead of having a select input, I decided t ...

javascriptjqueryhtmlcss

What is causing my inline JSX styling to override my media query?

After exhausting all my options and searching high and low for a solution, I am completely stuck. Despite trying various methods like importing media queries from a separate file and using ancestors to target elements, I still cannot get this to work. The ...

cssreactjsjsx

I encounter a difficulty in changing the background color when I click on the horizontal navigation menu, as it does not display the currently selected menu

.unorder_Hnav,li,.classes:active { background-color:#7CA738; height: 50px; display: table-cell; width: 1024px; text-align: center; line-height: 52px; font-weight: bolder; color: #FFFFFF; background-color: #457025; ...

htmlcss

Issue with the carousel feature displaying multiple images in Bootstrap 4.3

I attempted to create a Carousel using bootstrap that displays multiple images in a row and slides one image at a time, similar to this: https://i.sstatic.net/tw22R.png I followed this post. Instead of using bootstrap-3.3.6 and jquery-2.2.2, I used boots ...

csstwitter-bootstrapbootstrap-4carousel

Clicking outside of Bootstrap Modal inputs causes them to lose focus

Currently, I am tackling a challenge involving 2 bootstrap modals located on the same page with Bootstrap version 2.3.2. A frustrating issue that has arisen is that whenever either modal appears, the first time you click on any of the inputs within the mo ...

javascriptjqueryhtmlcsstwitter-bootstrap