Question

我有许多移动的html元素（实际上是hrefs），其ID如＃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/

我故意加边框以表明元素之间没有空隙。

滑鼠毛刺

1 个答案: