Мышиный глюк

Question

У меня есть несколько движущихся html-элементов (на самом деле hrefs) с такими идентификаторами, как # 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/

Я специально поставил границу, чтобы показать, что между элементами нет пробелов.