CODEWITHSUNDEEP
javascripthtmlcssweb
Fiolber Studios
Fiolber Studios

Reputation: 31

When mouse is over an element then show other element under the element

I'm creating an online shop and I want to do a good animation with the image and the "image-color changer" like the online shops.

I want when you move your mouse above the image it displays a bar with dots and the color to change.

I have already configured the images, and arrows to change between images and dots under the image but I want to only show the dots when the mouse is above.

Something like this

I have this but I don't know where and how to write the code to do that.

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}
* {
  box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Hide the images by default */

.mySlides {
  display: none;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}
<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 4</div>
    <img src="https://imgur.com/cO9OxGF.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 4</div>
    <img src="https://imgur.com/mN2ZEE5.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 4</div>
    <img src="https://imgur.com/l1Q0Irp.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">4 / 4</div>
    <img src="https://imgur.com/2qQaYoG.png" style="width:100%">
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)" mouseenter=""></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
</div>

Upvotes: 3

Views: 55

Answers (1)

Lord-JulianXLII
Lord-JulianXLII

Reputation: 1249

With the right combination of CSS selectors this is not a problem.

.slideshow-container:not(:hover) ~ div {
  visibility: hidden
}

this selector will target all divs that are preceded by an element with the class slideshow-container, that are not being hovered on.

Meaning, you don't hover over the picture, the div after the picture will get selected, and visibility set to hidden - When you hover over the picture, the selector will now not select the div after the picture, meaning the visibility hidden style won't apply now.

Only problem being that if you want to click on the now present bar, you'll have to stop hovering over the picture therefor hiding the bar again. To fix this you can just have a selector that targets the div directly (and on hover prevent it from being hidden)

Upvotes: 1

Related Questions