CODEWITHSUNDEEP
htmlcss
Nichole A. Miler
Nichole A. Miler

Reputation: 1371

Show child element on parent hover in CSS

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 */
}

Upvotes: 77

Views: 84809

Answers (5)

fardolieri
fardolieri

Reputation: 591

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>

What I like to do in my projects is to add a utility class or two. And instead of display: none I like to use opacity: 0 because it is animatable.

*:has(>.visible-on-parent-hover):not(:hover)>.visible-on-parent-hover {
  opacity: 0;
}

*:has(>*>.visible-on-grandparent-hover):not(:hover)>*>.visible-on-grandparent-hover {
  opacity: 0;
}
<div>grandparent
  <span>parent
    <span class="visible-on-parent-hover">I'm visible on parent hover</span>
  </span>
</div>

<div>grandparent
  <span>parent
    <span class="visible-on-grandparent-hover" style="transition: opacity 400ms">I'm visible on grandparent hover (animated)</span>
  </span>
</div>

Upvotes: 11

mohan mu
mohan mu

Reputation: 83

to hide element initially


#something > .hide {
  display: none;
}

display element on hover

#something:hover {
  .hide {
    display: inline;
  }
}

Upvotes: -3

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

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>

Upvotes: 163

RickShaw
RickShaw

Reputation: 311

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;
}

Upvotes: 4

william.eyidi
william.eyidi

Reputation: 2355

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

Upvotes: 0

Related Questions