JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>a</li>
  <li>b</li>
  <li>c
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </li>
  <li>d
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3 <b>bold</b></li>
    </ul>
  </li>
  <li>e</li>
</ul>

JavaScript

document.addEventListener('mouseover', function(evt){
  removeHilight()
  hilightParents(evt.target)
})

function removeHilight() {
  document.querySelectorAll('.highlight').forEach(
    el => el.classList.remove('highlight')
  )
}

function hilightParents(el) {
	do {
  	el.classList.add('highlight')
  } while (el = el.parentNode)
}