隐藏悬停JavaScript上的兄弟姐妹

Question

I'm trying to write a function that watches an element and when hovered or focused on, hides it's siblings.

I've written this

var hotSpotDiv = document.getElementsByClassName('custom-hotspot');
hotSpotDiv.addEventListener('mouseenter', function(e) {
    this.classList.add('active');
})

hotSpotDiv.addEventListener('mouseleave', function(e) {
    this.classList.remove('active');
})

Which works but I'm stuck trying to think of how I can hide the elements that do not have the active class added on hover.

Answer 1

This code is ...not great.. and I made some presumptions about your scenario, but it should hopefully give you a good jumping off point.

 var hotSpotDivs = document.getElementsByClassName('custom-hotspot'); var i; function hotspotMouseEnter(e) { this.classList.add('active'); this.parentNode.classList.add('active'); } function hotspotMouseLeave(e) { this.classList.remove('active'); this.parentNode.classList.remove('active'); } for (i=0; i<hotSpotDivs.length; i++) { hotSpotDivs[i].addEventListener('mouseenter', hotspotMouseEnter); hotSpotDivs[i].addEventListener('mouseleave', hotspotMouseLeave); } 

 .the-container.active>.custom-hotspot { visibility: hidden; } .the-container.active>.custom-hotspot.active { visibility: visible; } 

 <div class="the-container"> <p class="custom-hotspot">hotspot 1</p> <p class="custom-hotspot">hotspot 2</p> <p class="custom-hotspot">hotspot 3</p> <p class="custom-hotspot">hotspot 4</p> <p class="custom-hotspot">hotspot 5</p> <p class="custom-hotspot">hotspot 6</p> </div>