javascript - 当鼠标光标离开 div 时获取悬停的最后一个事件类？

Question

我有一个包含 3 张幻灯片的 Accordion 菜单。我需要在悬停时获取最后一个事件类，以便能够将其用于检查条件，以便在鼠标光标离开菜单 div 时保持幻灯片打开。到目前为止，我能够将类附加到每张幻灯片，但它们只检查它们是否在菜单 div 内。有没有办法检查我悬停在上面的唯一一张事件幻灯片？
Codepen

HTML代码

 <div class="myMenu">
      <ul>
        <li class="mySlides slide1"><a class="img1" href="#"></a></li>
        <li class="mySlides slide2"><a class="img2" href="#"></a></li>
        <li class="mySlides slide3"><a class="img3" href="#"></a></li>
      </ul>
    </div>

JavaScript

var slide1 = document.querySelector('.slide1');
var slide2 = document.querySelector('.slide2');
var slide3 = document.querySelector('.slide3');
  var img1 = document.querySelector('.img1');
  var img2 = document.querySelector('.img2');
  var img3 = document.querySelector('.img3');

/*  */
document.querySelector('.myMenu').addEventListener('mouseout', mouseOutMenu);
function mouseOutMenu() {
  if(slide1.classList.contains('insideMenu')) {
    slide1.style.width = '298px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_open_leszbs.jpg')";

    slide2.style.width = '21px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";
    slide3.style.width = '21px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
  } 

  if(slide2.classList.contains('insideMenu')) {
    slide2.style.width = '301px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_open_g8qfff.jpg')";

    slide1.style.width = '21px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
    slide3.style.width = '21px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
  } 

  if(slide3.classList.contains('insideMenu')) {
    slide3.style.width = '301px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_open_gcengd.jpg')";

    slide1.style.width = '21px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
    slide2.style.width = '21px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";
  }
}

/****************           1           *******************/
/**********************************************************/
document.querySelector('.slide1').addEventListener('mouseover', mouseOver1);
function mouseOver1() {
  slide1.classList.add('insideMenu');  

  if(slide1.style.width == '298px') {
      slide1.style.width = '298px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_open_leszbs.jpg')";
  } else {
    slide1.style.width = '298px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_open_leszbs.jpg')";
  }

  slide2.style.width = '21px';
  img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";

  slide3.style.width = '21px';
  img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
}

document.querySelector('.slide1').addEventListener('mouseout', mouseOut1);
function mouseOut1() {

    if(slide1.style.width > '21px') {
      slide1.style.width = '21px';
      img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
    }
}

/****************           2           *******************/
/**********************************************************/
document.querySelector('.slide2').addEventListener('mouseover', mouseOver2);
function mouseOver2() {
  slide2.classList.add('insideMenu');  
  if(slide2.style.width == '301px') {
      slide2.style.width = '301px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_open_g8qfff.jpg')";
  } else {
    slide2.style.width = '301px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_open_g8qfff.jpg')";
  }

  // close the rest of slides
  slide1.style.width = '21px';
  img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";

  slide3.style.width = '21px';
  img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
}

document.querySelector('.slide2').addEventListener('mouseout', mouseOut2);
function mouseOut2() {

    if(slide2.style.width > '21px') {
      slide2.style.width = '21px';
      img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";
    }
}

/****************           3           *******************/
/**********************************************************/
document.querySelector('.slide3').addEventListener('mouseover', mouseOver3);
function mouseOver3() {
  slide3.classList.add('insideMenu');  
  if(slide3.style.width == '301px') {
      slide3.style.width = '301px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_open_gcengd.jpg')";
  } else {
    slide3.style.width = '301px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_open_gcengd.jpg')";
  }

  slide2.style.width = '21px';
  img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";

  slide1.style.width = '21px';
  img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
}

document.querySelector('.slide3').addEventListener('mouseout', mouseOut3);
function mouseOut3() {

    if(slide3.style.width > '21px') {
      slide3.style.width = '21px';
      img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
    }
}

/**********************************************************/

Answer 1

只是对您的代码稍作修改。我希望它能满足您的需求，顺便说一句，这是一个起点:

var slide1 = document.querySelector('.slide1');
var slide2 = document.querySelector('.slide2');
var slide3 = document.querySelector('.slide3');
var img1 = document.querySelector('.img1');
var img2 = document.querySelector('.img2');
var img3 = document.querySelector('.img3');


var timer;

/*  */
document.querySelector('.myMenu').addEventListener('mouseout', mouseOutMenu);

function mouseOutMenu() {
  if (slide1.classList.contains('insideMenu')) {
    slide1.style.width = '298px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_open_leszbs.jpg')";

    slide2.style.width = '21px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";
    slide3.style.width = '21px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
  }

  if (slide2.classList.contains('insideMenu')) {
    slide2.style.width = '301px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_open_g8qfff.jpg')";

    slide1.style.width = '21px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
    slide3.style.width = '21px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
  }

  if (slide3.classList.contains('insideMenu')) {
    slide3.style.width = '301px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_open_gcengd.jpg')";

    slide1.style.width = '21px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
    slide2.style.width = '21px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";
  }
}

/****************           1           *******************/
/**********************************************************/
document.querySelector('.slide1').addEventListener('mouseover', mouseOver1);

function mouseOver1() {
  pauseTheLoop();
  slide1.classList.add('insideMenu');

  if (slide1.style.width == '298px') {
    slide1.style.width = '298px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_open_leszbs.jpg')";
  } else {
    slide1.style.width = '298px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_open_leszbs.jpg')";
  }

  slide2.style.width = '21px';
  img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";

  slide3.style.width = '21px';
  img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
}

document.querySelector('.slide1').addEventListener('mouseout', mouseOut1);

function mouseOut1() {

  if (slide1.style.width > '21px') {
    slide1.style.width = '21px';
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
  }
}

/****************           2           *******************/
/**********************************************************/
document.querySelector('.slide2').addEventListener('mouseover', mouseOver2);

function mouseOver2() {
  pauseTheLoop();
  slide2.classList.add('insideMenu');
  if (slide2.style.width == '301px') {
    slide2.style.width = '301px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_open_g8qfff.jpg')";
  } else {
    slide2.style.width = '301px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_open_g8qfff.jpg')";
  }

  // close the rest of slides
  slide1.style.width = '21px';
  img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";

  slide3.style.width = '21px';
  img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
}

document.querySelector('.slide2').addEventListener('mouseout', mouseOut2);

function mouseOut2() {

  if (slide2.style.width > '21px') {
    slide2.style.width = '21px';
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";
  }
}

/****************           3           *******************/
/**********************************************************/
document.querySelector('.slide3').addEventListener('mouseover', mouseOver3);

function mouseOver3() {
  pauseTheLoop();
  slide3.classList.add('insideMenu');
  if (slide3.style.width == '301px') {
    slide3.style.width = '301px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_open_gcengd.jpg')";
  } else {
    slide3.style.width = '301px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_open_gcengd.jpg')";
  }

  slide2.style.width = '21px';
  img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";

  slide1.style.width = '21px';
  img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
}

document.querySelector('.slide3').addEventListener('mouseout', mouseOut3);

function mouseOut3() {

  if (slide3.style.width > '21px') {
    slide3.style.width = '21px';
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
    /*img3.style.backgroundRepeat = 'no-repeat';*/
  }
}

/**********************************************************/
var slideIndex = 0;
carousel();

function carousel() {
  var index;
  var slides = document.getElementsByClassName('mySlides');
  for (index = 0; index < slides.length; index++) {
    slides[index].style.width = '21px';
    if (slides[0].style.width == '21px') {
      img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_closed_pnlynb.jpg')";
      img1.style.backgroundRepeat = 'no-repeat';
    }
    if (slides[1].style.width == '21px') {
      img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_closed_aonaaq.jpg')";
      img2.style.backgroundRepeat = 'no-repeat';
    }
    if (slides[2].style.width == '21px') {
      img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_closed_tobbqu.jpg')";
      img3.style.backgroundRepeat = 'no-repeat';
    }
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].style.width = '301px';
  if (slides[0].style.width == '301px') {
    slides[0].style.width = '298px'
    img1.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/1_open_leszbs.jpg')";
  }
  if (slides[1].style.width == '301px') {
    img2.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/2_open_g8qfff.jpg')";
  }
  if (slides[2].style.width == '301px') {
    img3.style.backgroundImage = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511157235/3_open_gcengd.jpg')";
  }

  timer = setTimeout(function() {
    carousel();
  }, 2000);

}

function pauseTheLoop() {
  clearTimeout(timer);
  console.log('stop loop');
  timer = setTimeout(function() {
    carousel();
    console.log('restart loop');
  }, 10000);
}

.myMenu {
	position: relative;
	width: 420px;
	height: 161px;
	overflow: hidden;
	margin: 35px;
  outline:1px solid red;
}
.myMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	}
.myMenu ul li {
	float: left;
	margin-right:5px;
	padding-bottom:2px;
	transition: width .3s ease-in-out;
}
.myMenu ul li a {
	/*border-right: 1px solid #fff;*/
	cursor:pointer;
	display:block;
	/*overflow:hidden;*/
	height: 161px;
	margin-left:1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myMenu">
  <ul>
    <li class="mySlides slide1">
      <a class="img1" href="#"></a>
    </li>
    <li class="mySlides slide2">
      <a class="img2" href="#"></a>
    </li>
    <li class="mySlides slide3">
      <a class="img3" href="#"></a>
    </li>
  </ul>
</div>

我已经添加了一个对您创建的计时器的控件，这样您就可以在鼠标悬停在幻灯片上时销毁它并停止循环 n 秒。 这是代码笔:https://codepen.io/anon/pen/BmYOrZ?editors=1111