时间戳

首页 > 解决方案 > 使用Javascript移动鼠标后如何保持显示onmouseover

javascript - 使用Javascript移动鼠标后如何保持显示onmouseover

问题描述

我对这些照片有三个目标，除了第一个之外都隐藏了。悬停在第一张图片上时显示与第一张内联的所有图片，并在悬停在所有图片上时继续显示。仅当再次将鼠标悬停在第一个区域时，才隐藏图片离开显示区域。（我忘记了 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>

标签： javascripthtmlcsswebpage

解决方案

好的，现在我明白了。

在这里，您有一个有效的示例。如果你想改变延迟时间，你必须在 setTimeout 中改变它。（现在它的 500milli = 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()">

推荐阅读