When hovering parent show only the child element

1

Hi everyone!

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

Scenario:

Element: Nestable slider
Source: query loop

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

Setup:

  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!

2

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.

3

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.

4

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