71

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 */
}
1
  • @Nichole check the my answer, it should solve your problem Dec 25, 2015 at 4:11

5 Answers 5

155

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>

3
  • 2
    Thanks, this helped me a few times :)
    – Roelant
    Oct 13, 2018 at 13:10
  • I've seen some strange methods none of which I could get to work. This one, simple, concise and more importantly, works. Couldn't ask for more, thank you. Aug 18, 2021 at 7:57
  • Very nice answer. - The solution works also fine if your parent rule is a class selector. It is not mandatory to have an id in your parent.
    – Alex
    Sep 21, 2022 at 9:26
4

Without knowing how you've styled your controls,if you are using any css-js related libraries, the class ".hide" is most likely defined there and will be called by default which will then hide your button thus you manipulate it using JQuery or Javascript.

However, if you have vanillarised your code and the hidden state of your button is display:none; users will be left with a blank page not knowing what or where to hover so you must give them something to hover on:

Sol 1:

HTML:
<div id="something">
     Hover Here
    <button class="hides">delete</button>
</div>

CSS:
#something .hides{

    display:none;
}

#something:hover .hides{

    display:inline-block;
}

If the hidden state of your button is visibility:hidden;this will hide the button but will still reserve its space on the screen thus leaving an awkward interface unless you make it fancy with styling.

Sol 2:

HTML:

<div id="something">
    <button class="hides">delete</button>
</div>

CSS:
#something{

    /*My fancy style;*/
}
#something .hides{

    visibility: hidden;
}

#something:hover .hides{

        visibility: visible;
}
2

There is a modern, less invasive way of hiding the child if the parent is not hovered.

.parent:not(:hover) .child {
  display: none;
}
<div class="parent">parent 
  <span class="child">child</span>
</div>

1
  • This should be the accepted answer, it is much more straightforward than the accepted answer
    – RcCookie
    Oct 23 at 15:04
0

There are two states in your situation, the first one is when the mouse hover the element the second is when it doesn't as a result leave

here you have to target the element .hide when the pointer is on div then then disable any click event that may occur.

code snippet:

div#something:hover .hide{

   pointer-events: none;
   color: GrayText;
   background-color: #ddd;
   background: #ddd;
}

working example :

jsfiddle

cheers

1
  • it allows you to manage the behaviour of the cursor while being on the element with regards to the events( clicks, select ...) Dec 25, 2015 at 4:20
-3

to hide element initially


#something > .hide {
  display: none;
}

display element on hover

#something:hover {
  .hide {
    display: inline;
  }
}
2
  • 2
    Hi and welcome to S/O - and thank you for actively contributing! :) Please consider expanding on your answer. It's helpful to provide context around an answer, instead of only code. How do I write a good answer? is well worth reading!
    – CmdrSharp
    Apr 5, 2020 at 8:16
  • 2
    You're answer does not contain valid css syntax
    – Kyan
    May 9, 2020 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.