Mouseleave故障

Question

我有许多移动的html元素(实际上是href)，它们的I是#s1，#s2等。每次我将鼠标悬停在其中一个元素上时，我希望其他一些元素消失。@AndrzejGorgoń通过使用JS帮助我获得了这个。这是我的html的摘录：

<div id=generalMap>

<a href="donner.html" class=S id=s0 data-hide-on-hover="2,6,7" data-hide-enable >Donner</a>
<a href="benevoles.html" class=S id=s1 data-hide-on-hover="2,3" data-hide-enable >Bénévoles</a>
<a href="tentatives.html" class=S id=s2 data-hide-on-hover="1,3,5" data-hide-enable >Tentatives</a>
<a href="belgium+kitchen.html" class=S id=s3 data-hide-on-hover="0,5,6" data-hide-enable >Belgium Kitchen</a>
etc.

下面是JS代码，如何让其中的一些出现：

var elements = document.querySelectorAll('[data-hide-enable]');

elements.forEach(function(element) {

// add on hover effects
element.addEventListener("mouseenter", function(element) {
    var elementsIdsToHide = element.target.getAttribute("data-hide-on-hover").trim().split(',');

    var cssSelector = elementsIdsToHide.map(function(s) {
        return "#s" + s;
    });

    var elementsToHide = document.querySelectorAll(cssSelector.join(","));

    console.log(elementsToHide);

    elementsToHide.forEach(function(elemToHide) {
        elemToHide.setAttribute("style", "opacity: 0")
    });

})

element.addEventListener("mouseleave", function(element) {
    console.log(document.querySelectorAll("[id^='s']"));
    var elements = document.querySelectorAll("[id^='s']");

    elements.forEach(function(elem) {
        elem.setAttribute("style","opacity: 1");
    });
} )

})

然而，当我的鼠标离开时，有一个间隙，其中所有的元素都出现了故障(消失了1/2秒)。

如何摆脱这个问题？

Answer 1

您必须删除元素之间的间隙。在这里，您有许多方法可以实现这一点。

#generalMap {
    display: flex;
}

.S {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    border: 1px solid black;
}

https://jsfiddle.net/eqr1fxwL/

我特意设置了边框，以表明元素之间没有间隙。