JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <article>
    <div>
       
    </div>
  </article>
</main>

CSS

main, article, div {
  border: 1px solid lightgrey;
  padding: 30px;
}

.hovered {
  border-color: red;
}

JavaScript

for (const el of document.querySelectorAll('main,article,div')) {
    el.addEventListener("mouseenter", function( event ) {
        for (const other of document.getElementsByClassName('hovered')) {
        	other.classList.remove('hovered');
        }
        
        el.classList.add('hovered');
    }, false);
    
    el.addEventListener("mouseleave", function( event ) {
        el.classList.remove('hovered');
        el.parentElement.classList.add('hovered');
    }, false);
}