JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<div class="div1">
<div class="div2">
  <div class="div3">
    <div class="div4">
      <ul>
        <li>test</li>
        <li><a href="#">ali</a></li>
        <li><p>asdasd</p></li>
      </ul>
    </div>
  </div>
</div>
</div>

CSS

div {
  padding: 10px;
}
ul {
  background: #ddd;
}

.hovered {
	    outline: 2px solid green;
}

JavaScript

/* $(document).ready(function() {
  $("body *").hover(function() {
    $(this).parent().removeClass("hovered");
    $(this).addClass("hovered");
  }, function() {
    $(this).removeClass("hovered");
  });
}); */

var element = document.getElementsByTagName("body")[0];
var nodes = [];
var walker2 = document.createTreeWalker(
    element,
    NodeFilter.SHOW_ELEMENT,
    null,
    false
   );

   while ((nodes = walker2.nextNode())) {
    walker2.currentNode.addEventListener("mouseenter", function() {      
    	this.classList.add("hovered");      
  	});
    
    walker2.currentNode.addEventListener("mouseout", function() {
        this.classList.remove("hovered");
    });
    
 	}