Javascript使用鼠标悬停类来效应子ids

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.child {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
}

.child:hover {
  background-color: #f00;
  color: #fff;
}

var parent = document.getElementById('parent');
var children = parent.getElementsByClassName('child');

for (var i = 0; i < children.length; i++) {
  children[i].addEventListener('mouseenter', function() {
    this.style.backgroundColor = '#f00';
    this.style.color = '#fff';
  });

  children[i].addEventListener('mouseleave', function() {
    this.style.backgroundColor = '#ccc';
    this.style.color = '';
  });
}