關於懸停隱藏兄弟姐妹javascript

Question

我想寫一個函數，觀看一個元素，當徘徊或集中時，隱藏它的兄弟姐妹。

我寫這個

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

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

哪些工作，但我堅持試圖想我怎麼能隱藏不具備active類懸停添加的元素。

Answer 1

此代碼是...不是很好..我對你的場景做了一些推測，但它應該有希望給你一個很好的起點。

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"> 
 
\t <p class="custom-hotspot">hotspot 1</p> 
 
\t <p class="custom-hotspot">hotspot 2</p> 
 
\t <p class="custom-hotspot">hotspot 3</p> 
 
\t <p class="custom-hotspot">hotspot 4</p> 
 
\t <p class="custom-hotspot">hotspot 5</p> 
 
\t <p class="custom-hotspot">hotspot 6</p> 
 
</div>