How to show button on div mouse hover

Question

i want to show button on div hover. when i hover mouse on div then button show otherwise hide.

my button in divbutton div.

html

Answer 1

Mr. Alien's answer gives a nice CSS implementation. If you need in jquery, use this -

$( ".divbutton" )
 .on("mouseenter", function() {
  $("button").show();
})
.on("mouseleave", function() {
  $("button").hide();
});

In pure JavaScript -

var buttonDiv = document.getElementsByClassName("divbutton")[0];  //better use some id and then use getElementById

buttonDiv.onmouseover = function() {
    document.getElementById("YourButtonId").style.display = 'block';
}

buttonDiv.onmouseout = function() {
    document.getElementById("YourButtonId").style.display = 'none';
}