Show child element on parent hover in CSS

Question

Is it possible to toggle the Delete button when mouse hovers onto the parent div in pure CSS?

HTML

<div id="parent">     <button class="hidden-child">delete</button> </div> 

CSS

#parent:hover{     /* Some CSS here */ } 

Answer 1

if you have styled hide like this (the page will be displayed as if the element is there but not seen):

#parent .hidden-child{     visibility: hidden; } 

you may do it like this to just hide it:

#parent:hover .hidden-child{     visibility: visible; } 

and if you have styled it like this (the page will be displayed as if the element is not there):

#parent .hidden-child{     display: none; } 

you may do it like this:

#parent:hover .hidden-child{     display: block; } 

In Action!

#parent {     width: 10rem;     height: 10rem;     background-color: #ababab; }  #parent .hidden-child{     visibility: hidden; }  #parent:hover .hidden-child{     visibility: visible; }

<div id="parent">     <button class="hidden-child">Delete</button> </div>