CODEWITHSUNDEEP
javascripthtmlmouseevent
Aleksandar Stankovic
Aleksandar Stankovic

Reputation: 1

Event listener hover changing other element

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?

Upvotes: 0

Views: 2478

Answers (1)

Alexey Soshin
Alexey Soshin

Reputation: 17721

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>

Upvotes: 1

Related Questions