<html lang="en">
<head>
<title>jQuery Show/Hide Button On Hover Div Element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
div{
background:#ff9c46;
padding:30px;
height: 20px;
text-align: center;
}
button{
display:none;
}
</style>
<script>
$(document).ready(function () {
$(document).on('mouseenter', 'div', function () {
$(this).find(":button").show();
}).on('mouseleave', 'div', function () {
$(this).find(":button").hide();
});
});
</script>
</head>
<body>
<h2>jQuery Show/Hide Button On Hover Div Element</h2>
<p>Mouse over the below box to see the button.</p>
<div>
<button type="button">Button</button>
</div>
</body>
</html>