javascript - 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

<div class="divbutton">
   <button type="button" style="display: none;">Hello</button>
</div>

when I hover mouse on div it should show but how to do that i do not know. when I remove mouse button again hide. Thank you.

Answer 1

Use the below selector

button {
  display: none; /* Hide button */
}

.divbutton:hover button {
   display: block; /* On :hover of div show button */
}

Demo

Also make sure you assign some height or min-height to your div element, else it will be 0 as it doesn't hold any content. Also, don't use display: none; as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important which is bad.

In the above example am using button {/*Styles*/} but that is a general element selector, so make sure you define a class to your button element.