CODEWITHSUNDEEP
jquery
user3180105
user3180105

Reputation: 381

jquery how to fix hover show() effect disabled by input field?

Pretty simple problem:

I have a form (login/password) placed inside a dropdown menu that only appears when hovering over the icon and form. Ie, mouseleave and it disappears. Here's the script:

$(document).ready(function() {
  $('.headermenushow').hover(function () {
    $(this).next('.dropmenu').slideDown(50);
  });
  $('.navselector').mouseleave(function () {
    $('.dropmenu').fadeOut(50);
  });
});

Straight forward stuff. The problem is, once I click on the text input field, the script registers this as a mouseleave and the form disappears. I need the form to stay visible while filling it in!

Any ideas how to fix this?

Upvotes: 1

Views: 194

Answers (1)

hemanth
hemanth

Reputation: 1043

I did not understood having hover & mouseleave events on different classes. However hover binds both mouseenter & mouseleave events (Refer this). So you need not have a different mouseleave event. 

$(<Selector>).hover(functionToHandleWhenMouseEnters, 
                             functionToHandleWhenMouseLeaves);

I have included a simple example below.

Example: (fiddle)

Html:

<div id="nav_bar">
    <a id="option">Hover menu</a>
    <ul id="dropmenu">
        <li>a</li>
        <li>b</li>
    </ul>
</div>

JavaScript:

$(document).ready(function() {
  $("#dropmenu").hide();
  $("#option").hover(
    function () {
        $(this).next('#dropmenu').slideDown(50);
    },
    function () {
        $(this).next('#dropmenu').slideUp(50); 
        //$(this).next('#dropmenu').fadeOut(500);
    });
});

Upvotes: 1

Related Questions