jQuery: Maintain hover state regardless of browser's suggestions for input elements

Question

jQuery: Maintain hover state regardless of browser's suggestions for input elements

I have a navigation with a nested ul list structure like this

<ul id='mainNav'>
 <li> Some Stuff!
    <ul>
     <li>Page 1</li>
     <li>Page 2</li>
    </ul>
 </li>
 <li> Hover here to login! 
   <ul >
    <li>
     <div class='login'>
      <p>Login</p>
      <input type='password'>
      <button>Okay</button>
    </div>
   </li>
  </ul>
</ul>

and I am using jQuery to display the menu on hover

$('ul#mainNav > li').hover(function() {
    $(this).addClass("showMenu");
  },
  function(){
    $(this).removeClass("showMenu");
  }
);

While this works well, there is an issue with the input box for the login. When moving the mouse from the input box to a browser suggestion, jQuery interprets it as leaving the li element and removes the showMenu class, causing the submenu to disappear.

When hovering over the li element, the login form opens https://i.sstatic.net/akwMR.png

However, when hovering over a browser suggestion, the li element disappears except for the browser suggestion itself

https://i.sstatic.net/JH4Fs.png

I have also created a jFiddle.

Is there a way to make jQuery continue hovering even if moving from the input element to a browser suggestion?

javascript jquery html css hover

Answer 1

Answer №1

To resolve the issue, consider removing the class .showMenu if the event's target is not an input element. Additionally, blur the input when the dropdown menu is hidden.

$('ul#mainNav > li').hover(function(e) {
    $(this).addClass("showMenu");
  },
  function(e) {
    if (!$(e.target).is('input')) {
      $(this).removeClass("showMenu");
      $('input').blur();
    }
  });

#mainNav>li {
  border: 3px solid #08C;
  background-color: #FFF;
  display: inline-block;
}

#mainNav li {
  margin: 0;
  padding: 0;
}

#mainNav,
#mainNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainNav li>ul {
  position: absolute;
  display: none;
  z-index: 1;
  min-width: 200px;
  padding: 0px;
  margin: 0px;
  text-align: left;
  background-color: #FFF;
  box-sizing: border-box;
}

#mainNav li.showMenu>ul {
  display: block
}

.login {
  border: 3px solid #08C;
  padding: 20px;
  margin: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method>

  <ul id='mainNav'>
    <li> Hover here to login!

      <ul>
        <li>
          <div class='login'>
            <p>Login</p>
            <input type='password'>
            <button>
   Okay
   </button>
          </div>

        </li>
      </ul>
  </ul>
</form>

https://jsfiddle.net/dzt87zbk/

Answer 2

To resolve the issue, consider removing the class .showMenu if the event's target is not an input element. Additionally, blur the input when the dropdown menu is hidden.

$('ul#mainNav > li').hover(function(e) {
    $(this).addClass("showMenu");
  },
  function(e) {
    if (!$(e.target).is('input')) {
      $(this).removeClass("showMenu");
      $('input').blur();
    }
  });

#mainNav>li {
  border: 3px solid #08C;
  background-color: #FFF;
  display: inline-block;
}

#mainNav li {
  margin: 0;
  padding: 0;
}

#mainNav,
#mainNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainNav li>ul {
  position: absolute;
  display: none;
  z-index: 1;
  min-width: 200px;
  padding: 0px;
  margin: 0px;
  text-align: left;
  background-color: #FFF;
  box-sizing: border-box;
}

#mainNav li.showMenu>ul {
  display: block
}

.login {
  border: 3px solid #08C;
  padding: 20px;
  margin: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method>

  <ul id='mainNav'>
    <li> Hover here to login!

      <ul>
        <li>
          <div class='login'>
            <p>Login</p>
            <input type='password'>
            <button>
   Okay
   </button>
          </div>

        </li>
      </ul>
  </ul>
</form>

https://jsfiddle.net/dzt87zbk/

jQuery: Maintain hover state regardless of browser's suggestions for input elements

Answer №1

Similar questions

Choosing a value from a dropdown automatically based on the selection of a specific value from another dropdown

Aligning the text in the middle of a button

Load website content in real-time

Running various IT blocks within a Protractor loop to enhance web testing

Other elements are unable to conceal Material UI InputBase

Troubles with Promise.all and json() in JavaScript causing errors being logged as "invalid function"

Styling Angular with FullCalendar - Personalized CSS Design

Challenges arising from utilizing distinct list style types for both parent and child elements with the assistance of CSS List

Is there a way to access jQuery pages from a user script?

How can the edit feature be implemented in AngularJS?

How to center an inline element using CSS and a background color

How to arrange data in angular/typescript in either ascending or descending order based on object key

Moving a window in Pyqt5 using QtWebChannel

Why is AngularJS redirection not retrieving the value from window.localStorage?

Vue data set is displaying as undefined

Leverage JavaScript to showcase Django object on the webpage

Developing a feature that eliminates an array and appends its contents to a list

Node.js application experiences a crash upon entering incorrect credentials

Enhancing the templateUrl with additional value in AngularJS and PHP

The face textures are not being applied correctly to the model imported in THREE.js