event.stopPropagation（）does not work

Question

私はお互いの近くにいくつかのボタンを持っています。彼らの上にホバリングすると、子供が飛び出し、ホバーをするとその効果はなくなります。

問題はcss（：ホバー）です。不安定な状態を防ぐことはできません。私はmouseenterとmouseleaveを使い、stopPropagation関数を使用して、子トリガー親eventListenerで不要なホバーが起きたときの不安定な状態を防ぎます。

それdoesntの仕事、私は他の回答をチェックするが、イベントを忘れる>>ここに私の問題

での私の仕事 完全なコードのリンクが何であるかを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（）を使用して、代わりにpointer-events CSSプロパティを使用してください：マウスインタラクションに対して透過的な要素を設定できます。ただ、「ポップアウトへのリンクを作るために、それは推移だとき、私はまた<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/