Event Listener Hover Changing Other Element

Question

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:

&

Solution 1:

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

Anyway, here's an example without jQuery:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><divclass = "switch"><divclass = "icon">A</div><divstyle = "display:none"class = "desc">Desc1</div></div><divclass = "switch"><divclass = "icon">B</div><divstyle = "display:none"class = "desc">Desc2</div></div><divclass = "switch"><divclass = "icon">C</div><divstyle = "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>

Html5 Dictionary

Event Listener Hover Changing Other Element

Solution 1:

Post a Comment for "Event Listener Hover Changing Other Element"