Hoveron CSS activates on one element only instead of all class members-CodePudding

I have a slideshow with two buttons for changing the slides and they need to be displayed only when you hover on them or the slideshow. Very primitive task and easy to accomplish, but that it doesn't work with both elements for some reasons...

Here's my rather primitive HTML:

div.carousel:hover .hide {
  display: inline-block !important;
  opacity: 1 !important;
}

.hide:hover {
  display: inline-block !important;
  opacity: 1 !important;
}

<div class="carousel-container">
  <div class="carousel">
    <img data-src="graphics/slider1.webp" />
    <img loading="lazy" data-src="graphics/slider2.webp" />
    <img loading="lazy" data-src="graphics/slider3.webp" />
    <img loading="lazy" data-src="graphics/slider4.webp" />
    <img loading="lazy" data-src="graphics/slider5.webp" />
    <img loading="lazy" data-src="graphics/slider6.webp" />
  </div>
  <button class="hide carousel-prev slider-button slider-black slider-display-left left-slider-button" style="opacity:0.1;">
 &#10094;
</button>
  <button class="hide carousel-next slider-button slider-black slider-display-right right-slider-button" style="opacity:0.1;">
&#10095;
</button>
</div>

CodePudding user response：

I think this should work for you:

.carousel-container .hide {
  visibility: hidden;
}
.carousel-container:hover .hide {
  visibility: visible;
}

Use those two instead of your div.carousel:hover .hide and .hide:hover

I use the hover selector on the parent and show/hide the buttons inside it accordingly.

CodePudding user response：

I think this is what you trying to achieve. I hope my code is helpful to you.

.hover button{
opacity:0.1;
}
.hover:hover button {
  display: inline-block !important;
  opacity: 1 !important;
}

<div class="hover">
<button class="hide carousel-prev slider-button slider-black slider-display-left left-slider-button">
    &#10094;
  </button>
<button class="hide carousel-next slider-button slider-black slider-display-right right-slider-button">
    &#10095;
  </button>
  </div>