Skip to content

Instantly share code, notes, and snippets.

@twalk4821
Created July 17, 2017 23:35
Show Gist options
  • Save twalk4821/9695e1257191f85583d5227365c8728f to your computer and use it in GitHub Desktop.
Save twalk4821/9695e1257191f85583d5227365c8728f to your computer and use it in GitHub Desktop.
QgRKQy
<div class="row">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
<div class="row">
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</div>
var boxes = document.querySelectorAll('.box');
for (box of boxes) {
box.addEventListener('mouseenter', function (e) {
e.target.classList.add('active');
});
box.addEventListener('mouseleave', function (e) {
e.target.classList.remove('active');
});
}
.box {
width:50px;
height: 50px;
margin: 5px;
}
.row {
display: flex;
}
#box1 {
background-color:red;
}
#box2 {
background-color:red;
}
#box3 {
background-color:green;
}
#box4 {
background-color:green;
}
.active {
background-color:blue!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment