event.stopPropagation() doesnt work

Question

나는 몇 개의 버튼을 서로 가까이 있습니다. 그 (것)들에 공중 선회 할 때 그들의 아이는 튀어 나오고 공중 선회가 끝날 때 효력은 간다.

문제는 css (: hover)입니다. 나는 지저분한 상태를 방지 할 수 없습니다. 그래서 mouseenter와 mouseleave를 사용하고 stopPropagation 함수를 사용하여 자식 트리거 부모 eventListener에서 원하지 않는 마우스가 가리킬 때 불안한 상태를 방지하려고합니다.

하지만 나던 일, 나는 다른 답변을 확인하지만, 이벤트 잊어 >> 여기 내 문제

입니다에 내 작품 전체 코드의 링크 무엇 https://jsfiddle.net/fe3m74xn/

var el = document.querySelectorAll('#slideShow_control a'); 

    var slideShow_control_hoverIn = function(e, i) { 
     e.stopPropagation(); 
     var bool = e.target.classList.contains('hover'); 
     el.forEach.call(el, function(e){e.classList.remove('hover')}); 
     if(!bool) { 
      e.target.classList.toggle('hover'); 
     } 
    }; 


    var slideShow_control_hoverOut = function(e, i) { 
     e.stopPropagation(); 
     el.forEach.call(el, function(e){e.classList.remove('hover')}); 
    }; 
    el.forEach.call(el,function(e){e.addEventListener('mouseenter',slideShow_control_hoverIn,false)}); 
    el.forEach.call(el,function(e){e.addEventListener('mouseleave',slideShow_control_hoverOut,false)}); 

Answer 1

을 잘 모릅니다. stopPropagation()을 사용하고 대신 CSS 속성 pointer-events을 사용하십시오. 마우스 상호 작용에 대해 모든 요소를 ​​투명하게 설정할 수 있습니다. 다만 "튀어에 대한 링크를 만들기 위해,이 맴돌고 때 나는 또한 <a>에 보이지 않는 의사 요소를 추가

#slideShow_control figure { 
    /* ... */ 
    pointer-events: none; 
} 
#slideShow_control a:hover figure { 
    /* ... */ 
    pointer-events: all; 
} 

: 는 만 <a>가 공중 선회하지 않는"튀어 "요소에 사용 "요소 경우 마우스 커서가 위로 상승하고 당신이 그것을 볼 수 있고 싶어 : 여기

#slideShow_control > a:hover:after { 
    content: ''; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    left: 0; 
    top: -20px; 
    /* background-color: red; */ /* uncomment to understand */ 
} 

이 편집 된 바이올린에 대한 링크입니다 : https://jsfiddle.net/m6ephL81/