При наведении на один элемент, скрыть остальные с одинаковыми свойствами?

Question

[Za Za]

Например при наведении на li скрыть остальные li в данном ul

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

Answer 1

[Максим]

Answer 2

[SpardaPrime]

const li  = document.querySelectorAll('li');

document.addEventListener('mouseover',e=>{
    let targ = e.target.closest('li');
    if(!targ) return;

    [...li].forEach(item=>item!==targ?item.style.visibility='hidden':null);
    
    targ.addEventListener('mouseleave',()=>{
        [...li].forEach(item=>item.style.visibility='visible');
    })
});