Can I use onmouseover for a div?

user_13986405 0
Viewed 353

I wanted to create a slideshow with some images inside a div. The slides will change continuously on hover over the slide. The div will appear in a position at the top-left corner of the webpage. There are other divs and functionalities in the web page as well.

I used this section of code inside the div for slideshow. It works when hover over the dots. I want it to happen when I hover over slide as well. I have used onmouseover inside div, but it isn't working. How can I do that?

The rest classes are just for positioning and size of the div.

html

<div role="list" class="banner__list w-dyn-items">
  <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a5419a_2017-lamborghini-huracan-    spyder-orange-exterior-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-   item mySlides" onmouseover="currentSlide(1)">
  </div>
  <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a541d8_2015-bentley-continental-gtc-  red-car-hero-2-image-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides" onmouseover="currentSlide(2)">
  </div>
  <div style="background-image:url(/frontEnd/5abda7fc38a916291e1647d3_2018-jeep-wrangler-white-isolated-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides" onmouseover="currentSlide(3)">
  </div>
  <span class="dot" onmouseover="currentSlide(1)"></span>
  <span class="dot" onmouseover="currentSlide(2)"></span>
  <span class="dot" onmouseover="currentSlide(3)"></span>
</div>

javascript

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var 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";
 }

Currently slide changes when I hover over the dots. I want the slide to continuously go to the next slide as long as that hover is maintained over the slide as well. How can I do that?

css html jquery javascript
3 Answers

Use a container element - onmouseenter and onmouseleave events

You can use the mouseover event, although when you enter the next slide it triggers the event once more. I suggest the use of container element with onmouseenter and onmouseleave events. When the mouse enters the container you start the slide show and stop when it leaves.

See Demo : https://jsfiddle.net/hexzero/03jvw52u/

var slideShowInterval;                 // Interval value is stored here

function slideShow(start) {
  if (start) {
    currentSlide((slideIndex += 1));   // First call before the Interval starts
    slideShowInterval = setInterval(function () {
      currentSlide((slideIndex += 1)); // This call currentSlide function every 700ms
    }, 700);                           //  700 is the delay before the next slide
  } else {
    clearInterval(slideShowInterval);  // Stop interval 
  }
}

<body>
  <section>
    <div role="list" class="banner__list w-dyn-items">
      <div                              <!-- Add Container element -->
        class="image-container"          
        onmouseenter="slideShow(true)"  <!-- And event triggers with a function call -->
        onmouseleave="slideShow(false)" 
      >
        <div
          style="background: blue;"
          role="listitem"
          class="banner__item w-dyn- item mySlides" <!-- Remove onmouseover -->
        ></div>
        <div
          style="background: black;"
          role="listitem"
          class="banner__item w-dyn-item mySlides" <!-- Remove onmouseover -->
        ></div>
        <div
          style="background: red;"
          role="listitem"
          class="banner__item w-dyn-item mySlides" <!-- Remove onmouseover -->
        ></div>
      </div>
      <span class="dot" onmouseover="currentSlide(1)"></span>
      <span class="dot" onmouseover="currentSlide(2)"></span>
      <span class="dot" onmouseover="currentSlide(3)"></span>
    </div>
  </section>
</body>
user_139615780

If you have the JQuery library, simple use this:

$(".mySlides:nth-child(1)").mouseover(function() {
    currentSlide(1);
});
$(".mySlides:nth-child(2)").mouseover(function() {
    currentSlide(2);
});
$(".mySlides:nth-child(3)").mouseover(function() {
    currentSlide(3);
});

or

var mySlides = $(".mySlides");
for (var i=0; i<mySlides.length; i++) {
    $(mySlides[i]).mouseover(function() {
        currentSlide(i+1);
    });
}

This adds a mouseover event to the div - instead of using the onmouseover attribute.

user_133195710 
//from w3school where you originally got your code I guess

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  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";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
user_7050240
Related