如何在使用Javascript移动鼠标后保持鼠标悬停显示

Question

我有三个目标与这些照片，隐藏所有除了第一个。当鼠标悬停在第一张图片上时，显示所有的图片，当鼠标悬停在第一张图片上时，继续显示。隐藏图片一次，仅当再次悬停在第一张上方时才显示该区域。(我忘记了img源代码，但它们在代码中)为了始终如一地做到这一点，我编写了html、css和js代码，但我只能实现两个，而不是全部三个，重复地没有刷新。代码：

​

var tog = document.querySelector('#toggle');

var glide = document.querySelector('#first')

glide.onmouseover = function() {

  tog.classList.add('picclass');

}

tog.onmouseout = function() {

  tog.classList.remove('picclass');

}

.picclass {
  display: flex
}

.pics {
  display: none;
}

.picclass > .pics {
  display: inline-flex;
}

#first {
  display: inline-flex;
}

<div id="toggle">

  <img id="first">

  <img class="pics">

  <img class="pics">

</div>

​

Answer 1

好了，现在我明白了。

这里有一个可以正常工作的示例。如果您想更改延迟时间，您必须在setTimeout中更改它。(现在是500毫秒=0.5秒)

https://jsfiddle.net/falkedesign/ce1ayo93/21/

var tog = document.querySelector('#toggle');
var glide = document.querySelector('#first')
var isover = false;

mover = function() {
    isover = true;
  tog.classList.add('picclass');
}

mout = function() {
    isover = false;
    setTimeout(removefunc,500)
}

removefunc =function(){
    if(!isover){
        tog.classList.remove('picclass');
      }
}

glide.onmouseover = mover;
tog.onmouseout = mout;

和在html中

<img class="pics" src="https://img.fireden.net/v/image/1531/17/1531179205107.png" onmouseover="mover()" onmouseout="mout()">