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">
	<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>

在悬停javascript上隐藏兄弟姐妹

1 个答案: