show navigation buttons only on mouse over

Question

I'm tring to do that with CSS but it isn't working. I've tried using:

.swiper-button-prev {
  display: none;
}

.swiper-button-prev:hover {
  display: block;
}

but it doesn't effect at all. if I do add some rule like background-color: yellow it does affect the element so the CSS is applied. What am I missing? here's the full thing

Answer 1

This element seems to have a display: flex with a higher specificity, which will override the display: none in posted example. Also :hover will not work if display is turned off for the element.

Try use opacity to hide the element, perhaps also consider give it a lower opacity such as opacity: 0.2 when not hovered, so that the user can still know that the button exists.

Forked project: codesandbox

Example:

.swiper-button-prev {
  opacity: 0;
}

.swiper-button-prev:hover {
  opacity: 1;
}