イベントリスナーホバー他の要素

を変更私は内外にマウスのイベント（ricon1）との1の場所に来る他のdivを表示/非表示のために、このスクリプトを作った：イベントリスナーホバー他の要素

HTML：

 <div class="rule-container"> 

     <div class="rule" id="rule1"> 
      <div class="rule-icon" id="ricon1"> 
      </div> 
      <div class="rule-decription" id="rdescription1"> 
      </div> 
     </div> 
     <div class="rule" id="rule2"> 
      <div class="rule-icon" id="ricon2"> 
      </div> 
      <div class="rule-decription" id="rdescription2"> 
      </div> 
     </div> 
     <div class="rule" id="rule3"> 
      <div class="rule-icon" id="ricon3"> 
      </div> 
      <div class="rule-decription" id="rdescription3"> 
      </div> 
     </div> 
     <div class="rule" id="rule4"> 
      <div class="rule-icon" id="ricon4"> 
      </div> 
      <div class="rule-decription" id="rdescription4"> 
      </div> 
     </div> 
    </div>

CSS：

div.rule { 
display: inline-block; 
width:20%; 
margin-left:2%; 
margin-right:2%; 
background-color: cadetblue; 

} 

div.rule:first-child { 
    margin-left:3.5%; 
    background-color:yellow; 
} 

div.rule > div { 
    width:100%; 
} 


div.rule-icon { 
    height:240px; 
    background-color:lightpink; 
    display:block; 

} 

div.rule-decription { 
    height: 240px; 
    background-color: springgreen; 
    display:none; 

}

JS：

document.getElementById("ricon1").addEventListener("mouseenter",function(){ 
    document.getElementById('ricon1').style.display = 'none'; 
    document.getElementById('rdescription1').style.display = 'block'; 
}); 

document.getElementById("ricon1").addEventListener("mouseout",function(){ 
    document.getElementById('ricon1').style.display = 'block';  
    document.getElementById('rdescription1').style.display = 'none'; 
});

しかし問題はそれが点滅していることです（オンとオフを連続的に切り替える、何が間違っていますか？

どのように私は6ペアのようなので、私はdiv（ricon1、rdescription1; ricon2、rdescription2 ...など）のすべてのペアのためにそれを行う必要はありませんスクリプトを変更することができますか？

出典

2016-08-27 Aleksandar Stankovic

、マウスがそれを離れるので、' mouseout'ハンドラがそれを示しており、実行され、マウスがその中にあり、 'mouseenter'ハンドラが実行されます。 – Barmar

はい、ちょうど、私は2番目のイベント（rdescriptionのためにマウスでなければなりません）を呼び出したと誤っています。 –

* complete * [mcve]を提供するようにHTMLを提供してください。これはあなたが望むものについてもっと知るのに役立ちます。 – Makyen

jQueryを使用したくない具体的な理由はありますか？

とにかく、ここではjQueryのない例です：あなたは `ricon1`を非表示にすると

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 

 
</head> 
 
<body> 
 
    <div class = "switch"> 
 
     <div class = "icon">A</div> 
 
     <div style = "display:none" class = "desc">Desc1</div> 
 
    </div> 
 
    <div class = "switch"> 
 
     <div class = "icon">B</div> 
 
     <div style = "display:none" class = "desc">Desc2</div> 
 
    </div> 
 
    <div class = "switch"> 
 
     <div class = "icon">C</div> 
 
     <div style = "display:none" class = "desc">Desc3</div> 
 
    </div> 
 
    <script> 
 
     var icons = document.querySelectorAll('.switch'); 
 
     for (var i = 0; i < icons.length; i++) { 
 
      icons[i].addEventListener("mouseenter", function() { 
 
       (this.querySelectorAll(".icon")[0]).style.display = 'none'; 
 
       (this.querySelectorAll(".desc")[0]).style.display = 'block'; 
 
      }); 
 

 
      icons[i].addEventListener("mouseleave", function() { 
 
       (this.querySelectorAll(".icon")[0]).style.display = 'block'; 
 
       (this.querySelectorAll(".desc")[0]).style.display = 'none'; 
 
      }); 
 
     } 
 
    </script> 
 
</body> 
 
</html>

出典

2016-08-27 14:50:26

ありがとうございます。 jQueryの質問に関しては、このWebページをJavascriptの基礎を学ぶアイディアでやっていますので、自動化された、多くの定義済みのjQueryと比較して、背後にあるすべてのロジック（どのような関数を呼び出すか、どのようなフローになるか）学習の次のステップになるもの –

イベントリスナーホバー他の要素

答えて

関連する問題