Dropdown Hover

by Preston Badeer

HTML

<div id="w1" class="wrapper">wrapper one</div>
<div id="d1" class="dropdown">dropdown one</div>
<div id="w2" class="wrapper">wrapper two</div>
<div id="d2" class="dropdown">dropdown two</div>
<div id="w3" class="wrapper">wrapper three</div>
<div id="d3" class="dropdown">dropdown three</div>

CSS

.active {
    background-color: blue;
}
.wrapper {
    margin-top: 1em;
    border: 1px solid green;
}
.dropdown {
    border: 1px solid yellow;
}

JavaScript

var dropdown = ['#d1', '#d2', '#d3'];
var wrapper = ['#w1', '#w2', '#w3'];

// On hover of dropdown, add active class to correlating wrapper
$.each(wrapper, function (index, data) {
    $(dropdown[index]).on("mouseenter mouseleave", function (e) {
        $(data).toggleClass('active');
    });
});