マウスカーソルが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 { 
 
\t position: relative; 
 
\t width: 420px; 
 
\t height: 161px; 
 
\t overflow: hidden; 
 
\t margin: 35px; 
 
    outline:1px solid red; 
 
} 
 
.myMenu ul { 
 
\t list-style: none; 
 
\t margin: 0px; 
 
\t display: block; 
 
\t } 
 
.myMenu ul li { 
 
\t float: left; 
 
\t margin-right:5px; 
 
\t padding-bottom:2px; 
 
\t transition: width .3s ease-in-out; 
 
} 
 
.myMenu ul li a { 
 
\t /*border-right: 1px solid #fff;*/ 
 
\t cursor:pointer; 
 
\t display:block; 
 
\t /*overflow:hidden;*/ 
 
\t height: 161px; 
 
\t 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

Answer 2

最新のアクティブなスライドを表示し続ける方法を考え出しました。

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

がマウスアウトするためのスライドクラスでmouseoverイベント とIMGのためのイメージパスを保存するためにそれらを使用し： は、3つの変数を作成しました。 これをすべてのスライドについて繰り返した。

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

Codepen attached here.