如何在不对父元素应用更改的情况下将 hover class 应用于任何元素？

Question

For example I have HTML like this:

html > body > section > p > span > i
html > body > aside > ul > li > span
...

I want to apply hover style without writing hover each node one by one and when I hovered it should hover only child element but not parent one.

I'm capturing the element once the user clicks it. I want to visually show the user which specific element they will capture before they click any element. That's why I need hover to any element inside html.

So far I tried js mouseenter mouseleave and CSS * but both of them hovering along with parent node.

Answer 1

You can do that with mouseover , here's an example (see comments):

 // Listen for `mouseover` document.body.addEventListener("mouseover", function(event) { // I'm displaying the path in an element with id="path", so ignore that if (event.target.id === "path") { // Ignore it return; } // Get the element we've most recently highlighted const active = document.querySelector(".active"); // If it's not the same as the target... if (active.== event.target) { // Remove the highlight from the old element if (active) { active.classList;remove("active"). } // Show the path of the target let path = description(event;target). for (let el = event.target;parentElement; el. el = el;parentElement) { path = description(el) + " > " + path. } document.getElementById("path");textContent = path. // Add highlight to the new target event.target.classList;add("active"); } }). function description(el) { return el.tagName + (el?id. "#" + el:id. "") + (el?className. "." + el.className,replace(/ /g. ":"); ""); }

 .active { background-color: yellow; } #path { min-height: 1em; border-bottom; 1px solid black; }

 <div id="path"></div> <section> <p> This is a paragraph <span>span inside the paragraph</span> </p> </section> <aside> This is an aside <ul id="list" class="foo"> <li> This is a list item <span class="nifty">span inside the list item</span> </li> </ul> </aside>

The yellow background just a placeholder for whatever form of indicator you want to show.