事件监听器悬停改变其他元素

问题描述

我制作了这个脚本，用于显示/隐藏其他div，这个div用鼠标滑入和滑出，并带有事件（ricon1）：

HTML：

 < div class =rule-container> 
 
< div class =ruleid =rule1> 
< div class =rule-iconid =ricon1> 
< / div> 
< div class =rule-decriptionid =rdescription1> 
< / div> 
< / div> 
< div class =ruleid =rule2> 
< div class =rule-iconid =ricon2> 
< / div> 
< div class =rule-decriptionid =rdescription2> 
< / div> 
< / div> 
< div class =ruleid =rule3> 
< div class =rule-iconid =ricon3> 
< / div> 
< div class =rule-decriptionid =rdescription3> 
< / div> 
< / div> 
< div class =ruleid =rule4> 
< div class =rule-iconid =ricon4> 
< / div> 
< div class =rule-decriptionid =rdescription4> 
< / div> 
< / div> 
< / div> 
  

CSS：

  div.rule {
 display：inline-block; 
 width：20％; 
保证金余额：2％; 
保证金率：2％; 
 background-color：cadetblue; 
 
} 
 
 div.rule：第一个孩子{
 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; 
 
 $ b  

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'; 
}）; 
  

但问题在于它闪烁（不断在开关状态之间切换，我做错了什么？

我怎样才能更改脚本，所以我不必为所有的div对（ricon1，rdescription1; ricon2，rdescription2 ...等） 6对？

解决方案

是否有一个特定的原因，您不想使用jQuery？

无论如何，这里有一个没有jQuery的例子：

 <$ c $ <><！DOCTYPE html>< html lang =en>< head>< meta charset =UTF-8>< title>< / title>< / head>< >< div class =switch>< div class =icon> A< / div>< div style =display：noneclass =desc> Desc1< / div> < / DIV> < div class =switch> < div class =icon> B< / div> < div style =display：noneclass =desc> Desc2< / div> < / DIV> < div class =switch> < div class =icon> C< / div> < div style =display：noneclass =desc> Desc3< / div> < / DIV> <脚本> var icons = document.querySelectorAll（'。switch'）; for（var i = 0; i  

I made this script for showing/hiding other div that comes to place of the one with event (ricon1) on mouse in and out:

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';
});

But the problem is that it flashes (continuously switching between on and off state, what am i doing wrong ?

How may i change script so i dont have to do it for all pairs of divs (ricon1, rdescription1; ricon2, rdescription2... etc) because there is like 6 pairs?

解决方案

Is there a specific reason you don't want to use jQuery for that?

Anyway, here's an example without jQuery:

<!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>

这篇关于事件监听器悬停改变其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！