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.

Answer 1

$(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.

Answer 2

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