當鼠標光標離開div時，獲取懸停時的最后一個活動類？

Question

我有3張幻燈片的手風琴菜單。 我需要獲取懸停時最后一個活動的類，以便能夠將其用於檢查條件，以在鼠標光標離開菜單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秒鍾。 這是codepen： https ://codepen.io/anon/pen/BmYOrZ ? editors = 1111

Answer 2

找出繼續顯示最新活動幻燈片的方式。 創建了3個變量：

   var lastSlide;
   var lastImg;
   var lastImgPath="";

使用它們來存儲鼠標懸停事件的圖像路徑以及帶有用於鼠標懸停的幻燈片類的img。 對於所有幻燈片重復此操作。 最后，將它們添加到菜單div上的main mouseout事件中，這使該部分的內容變得更小：

document.querySelector('.myMenu').addEventListener('mouseout', mouseOutMenu);
function mouseOutMenu() {
  lastSlide.style.width = '301px';
  lastImg.style.backgroundImage = lastImgPath;
}

附有Codepen。