highlight hovered element

by ryota kunisada

HTML

<body>
  <div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </div>
</body>

CSS

.hovered {
  box-shadow: 0px 0px 10px #2dff5e;
}

body {
  height: 50px;
}

JavaScript

document.body.addEventListener('mousemove', (event) => {
  const elements = document.getElementsByClassName('hovered')
  Array.prototype.filter.call(elements, function(target) {
    target.classList.remove('hovered')
  })
  event.target.classList.add('hovered')
})