Open dropdown on hover using jquery

Question

I have one drop-down with ul and li tag. It is working on click. I'm trying to open drop-down on mouse hover not a click. How can i achieve this.

<div class="ms-parent form-control">
    <button type="button">
        <span class="placeholder">Choose Anyone</span>
    </button>

    <div class="ms-drop bottom" style="display: none;">
        <ul>
            <li class="ms-select-all">
            <li>
            <label>
                <input type="checkbox" value="Abu Dhabi" undefined="">
                Computer
            </label>
            </li>
            <li>
            <label>
                <input type="checkbox" value="Al Ain" undefined="">
                Keyboard
            </label>
            </li>
            <li>
        </ul>
    </div>
</div>

The output is like normal html select drop-down. But i am looking to open dropdown on mouse hover event.

@MahenderSingh Including jQuery for this reason alone would be superfluous. This can be accomplished using CSS :hover... — War10ck
– War10ck, Commented Jan 8, 2015 at 13:53
I believe you're current markup is invalid. I don't believe you can nest an <li> element directly within another <li> element. You can nest a new unordered list <ul> and then new <li> element's in that list however... — War10ck
– War10ck, Commented Jan 8, 2015 at 13:55
There are lots and lots of tutorials out there for such functionalities. Have you checked them? If yes, provide the references or snippets. Then, mention where you have stucked and ask for help from community. — Bhavik Shah
– Bhavik Shah, Commented Jan 8, 2015 at 13:56
Duplicate question - stackoverflow.com/questions/4599975/… — Rob Scott
– Rob Scott, Commented Jan 8, 2015 at 13:57

Sandip · Accepted Answer · 2015-01-08 13:56:04Z

$(document).ready(function(){
  
  
  $('#btnToChoose').hover(
         function () {
           
           $('#content').show();
         }, 
         function () {

         }
     );
  
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
    <button type="button" name="btnToChoose" id="btnToChoose">
        <span class="placeholder">Choose Anyone</span>
    </button>

    <div id='content' class="ms-drop bottom" style="display: none;">
        <ul>
            <li class="ms-select-all">
            <li>
            <label>
                <input type="checkbox" value="Abu Dhabi" undefined="">
                Computer
            </label>
            </li>
            <li>
            <label>
                <input type="checkbox" value="Al Ain" undefined="">
                Keyboard
            </label>
            </li>
            <li>
        </ul>
    </div>
</div>

Change Design as per your convenience.

WagnerMaurer · Accepted Answer · 2015-01-08 14:58:52Z

0

  $('#btnToChoose')
  .on('mouseenter', function () { $('#content').show(); })
  .on('mouseleave', function () { $('#content').hide(); });

answered Jan 8, 2015 at 14:58

WagnerMaurer

786 bronze badges

Collectives™ on Stack Overflow

Open dropdown on hover using jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related