CODEWITHSUNDEEP
javascriptcsshover
Eolis
Eolis

Reputation: 655

only allow CSS hover event after timeout using JavaScript

I want to only allow a hover event when an element has been un-hovered for a timeout period, if the mouse re-enters the hovered element I want it to act as if the mouse never left.

ex: a navigation has a dropdown on CSS :hover, if the users mouse goes outside the hovered element by mistake the dropdown instantly dissapears, instead I would like to set a timer to check if the mouse has been unhovered for more than 500ms, if so close the dropdown; if the mouse has re-entered in that time period stop the closing event and leave menu open.

HTML::

<nav>
  <ul>
    <li>ghetto nav item 1
      <ul>
        <li>awful Dropdown item</li>
      </ul>
    </li>
    <li>ghetto nav item 2</li>
  </ul>
</nav>

CSS::

nav > ul > li > ul > li {
    display: none;
}
nav > ul > li:hover + ul > li {
    display: block;
}

JS:: ??

Upvotes: 0

Views: 152

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You could do this using CSS3. Apply transition-delay with the height of the element, instead of toggling display:

nav > ul > li > ul > li {
  transition-delay: 0.5s;
  height: 0px;
  overflow: hidden;
}

nav > ul > li:hover > ul > li {
  transition-delay: 0s;
  height: 100%;
}
<nav>
  <ul>
    <li>ghetto nav item 1
      <ul>
        <li>awful Dropdown item</li>
      </ul>
    </li>
    <li>ghetto nav item 2</li>
  </ul>
</nav>

Upvotes: 2

Related Questions