csspaginationslideshowreact-swiper

show navigation buttons only on mouse over


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


Solution

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