我可以将 onmouseover 用于 div 吗？
[英]Can I use onmouseover for a div?
问题描述
I wanted to create a slideshow with some images inside a div.
我想在 div 中创建一个包含一些图像的幻灯片。 The slides will change continuously on hover over the slide.幻灯片将在幻灯片上方的 hover 上不断变化。 The div will appear in a position at the top-left corner of the webpage.该 div 将出现在网页左上角的 position 中。 There are other divs and functionalities in the web page as well. web 页面中还有其他 div 和功能。
I used this section of code inside the div for slideshow.我在 div 中使用这部分代码进行幻灯片放映。 It works when hover over the dots.它在 hover 在点上时起作用。 I want it to happen when I hover over slide as well.我希望它发生在我 hover 在幻灯片上时。 I have used onmouseover inside div, but it isn't working.我在 div 中使用了 onmouseover，但它不起作用。 How can I do that?我怎样才能做到这一点？
The rest classes are just for positioning and size of the div. rest 类仅用于 div 的定位和大小。
html 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 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.当前，当我在点上 hover 时，幻灯片会发生变化。 I want the slide to continuously go to the next slide as long as that hover is maintained over the slide as well.我希望幻灯片连续 go 到下一张幻灯片，只要 hover 也保持在幻灯片上。 How can I do that?我怎样才能做到这一点？
3 个解决方案
解决方案1
2 已采纳 2020-07-25 20:29:20
Use a container element - onmouseenter and onmouseleave events使用容器元素 - onmouseenter 和 onmouseleave 事件
You can use the mouseover event, although when you enter the next slide it triggers the event once more.您可以使用 mouseover 事件，但当您进入下一张幻灯片时，它会再次触发该事件。 I suggest the use of container element with onmouseenter and onmouseleave events.我建议使用带有 onmouseenter 和 onmouseleave 事件的容器元素。 When the mouse enters the container you start the slide show and stop when it leaves.当鼠标进入容器时，您开始幻灯片放映并在离开时停止。
See Demo: https://jsfiddle.net/hexzero/03jvw52u/见演示： 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>
解决方案2
0 2020-07-24 20:30:11
If you have the JQuery library, simple use this:如果你有 JQuery 库，简单地使用这个：
$(".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.这将mouseover事件添加到 div - 而不是使用onmouseover属性。
解决方案3
0 2020-07-25 23:33:03
//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
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.