svg hover demo

by Stalk

HTML

<svg viewBox="0 0 300 300" width="300">
  <path id="foo" d="M14 133 L18 106 L72 61 L128 105 L130 131 L72 88 Z" />
  <path id="bar" d="M9 179 L72 134 L137 177 L139 210 L72 173 L5 212 Z" />
</svg>


<a href="#foo">one</a>
<a href="#bar">two</a>

CSS

svg path {
  fill: yellow;
  opacity: 0.2;
}
svg path:hover,
svg .hilight {
  fill: orange;
  opacity: 0.7;
}
svg {
  border: sol1d 1px tomato;
  background: url(https://static.pexels.com/photos/68631/pexels-photo-68631.jpeg) 100% 100% no-repeat;
  background-size: cover;
}

JavaScript

document.addEventListener('mouseover', function (evt) {
  let target = evt.target
  if (target.tagName === 'A') {
    let id = target.getAttribute('href')
    document.querySelector(id).classList.add('hilight')
  }
})

document.addEventListener('mouseout', function (evt) {
  document.querySelectorAll('.hilight').forEach(
    el => el.classList.remove('hilight')
  )
})