Show, Hide & Toggle a div on Mouseover using JavaScript and jQuery!

How to display a div on mouseover an image, button  or links?

Table of Contents –

1.     HTML

2.     CSS

3.     JavaScript and JQuery

HTML Code –

<div class="divbutton">
    <button type="button" id="downloadbtn">Download Files</button>
    <button type="button" style="display: none;">CSV</button>
    <button type="button" style="display: none;">EXCEL</button>
</div>

CSS Code –

.divbutton {
    height: 20px;
    width:109px;
    background: #fff;
}

JavaScript/jQuery Code-

$(function () {
      var Ids ='.divbutton';
      $(Ids).on('mouseenter', function () {
           $(Ids).find(":button").show();
           $(Ids).find('#downloadbtn').hide();
      }).on('mouseleave', function () {
           $(Ids).find(":button").hide();
           $(Ids).find('#downloadbtn').show();
      });
});

Result - http://jsfiddle.net/nwbuteqb/

I hope you are enjoying with this post! Please share with you friends. Thank you!!