0

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

Jack
  • 16,276
  • 55
  • 159
  • 284
  • You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. – Rob Dec 15 '22 at 15:54

1 Answers1

2

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;
}
John Li
  • 6,976
  • 3
  • 3
  • 27