时间戳

首页 > 解决方案 > 鼠标离开故障

javascript - 鼠标离开故障

问题描述

我有许多带有#s1、#s2 等ID 的移动html 元素（实际上是href）。每次我将鼠标悬停在其中一个上时，我都希望其他一些元素消失。@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 秒）。

如何摆脱这个？

标签： javascriptmouseentermouseleave

解决方案

您必须消除元素之间的间隙。在这里，您可以通过多种方式实现这一目标。

#generalMap {
    display: flex;
}

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

https://jsfiddle.net/eqr1fxwL/

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

推荐阅读