When hovering parent show only the child element

Hi everyone!

I am not sure if this is a bug or if it is missing functionality, unless I am missing something.


Element: Nestable slider
Source: query loop

Each element has a button and overlay visible only on hover, like this:


  1. The button is set to display:none

  2. The slide has :hover set and displays an overlay

  3. Setting interactions > hover > show element > CSS selector will show all elements with the same class like this:

The expected behavior is to have only the child element visible when hovering:

%root%:hover >.portfolio_slider_button{

display: block;


Unless I am missing something, can we have a setting for this?
I am working locally, so I cannot provide access.
Thank you!

Let me help you out.

  • Remove the interactions from the class.
  • Change your button’s class back to display: block.
  • You can keep the overlay as it is.

Then replace your CSS to this:

%root% .portfolio_slider_button {
  opacity: 0;
  visibility: hidden;
  transition: all 450ms ease;

%root%:hover .portfolio_slider_button {
  opacity: 1;
  visibility: visible;

%root% .portfolio_slider_button:hover {
  transform: scale(1.025);
  box-shadow: 0px 0px 1px 0px rgba(3,7,18, 0.02),  1px 1px 4px 0px rgba(3,7,18, 0.03),  2px 2px 9px 0px rgba(3,7,18, 0.05),  3px 3px 15px 0px rgba(3,7,18, 0.06),  5px 5px 24px 0px rgba(3,7,18, 0.08);

Let me know if this helps.

Hi, thank you so much for this!
However, I did not need help, I was referring to a setting that we could maybe have for controlling the hover for all elements with some class or only child elements of it.

This is the easiest and preferred way of showing elements on hover.

If you use display: none to hide/show elements you cannot use CSS transitions, and gives the overall feel much less smooth.

1 Like