开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js鼠标经过显示隐藏时间

在JavaScript中，实现鼠标经过显示隐藏元素，并控制显示隐藏的时间，通常涉及到事件监听和定时器的使用。以下是相关基础概念及实现方法：

基础概念

事件监听：JavaScript允许你为HTML元素添加事件监听器，以便在特定事件发生时执行代码。对于鼠标经过显示隐藏元素，常用的事件有mouseenter和mouseleave。
定时器：JavaScript提供了setTimeout和setInterval函数来设置定时器。setTimeout用于在指定的毫秒数后执行一次代码，而setInterval则用于每隔指定的毫秒数重复执行代码。

实现方法

以下是一个简单的示例，展示如何使用JavaScript实现鼠标经过显示隐藏元素，并控制显示时间为2秒：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mouse Enter/Leave Example</title>
    <style>
        #hiddenElement {
            display: none;
        }
    </style>
</head>
<body>
    <div id="container" style="width: 200px; height: 200px; background-color: lightblue;">
        鼠标经过显示隐藏内容
        <div id="hiddenElement">这是隐藏的内容</div>
    </div>

    <script>
        const container = document.getElementById('container');
        const hiddenElement = document.getElementById('hiddenElement');
        let timer;

        container.addEventListener('mouseenter', () => {
            clearTimeout(timer); // 清除之前的定时器，防止冲突
            hiddenElement.style.display = 'block';
        });

        container.addEventListener('mouseleave', () => {
            timer = setTimeout(() => {
                hiddenElement.style.display = 'none';
            }, 2000); // 2秒后隐藏元素
        });
    </script>
</body>
</html>

解释

HTML结构：一个容器div包含一个隐藏的子元素div。
CSS样式：初始状态下，隐藏元素#hiddenElement的display属性设置为none，使其不可见。
JavaScript逻辑：
- 当鼠标进入容器时，触发mouseenter事件，清除之前的定时器（如果有），并将隐藏元素的display属性设置为block，使其可见。
- 当鼠标离开容器时，触发mouseleave事件，设置一个2秒的定时器，定时器到期后将隐藏元素的display属性设置回none，使其再次不可见。

应用场景

这种技术常用于实现工具提示、下拉菜单、悬浮卡片等交互效果，提升用户体验。

注意事项

使用mouseenter和mouseleave而不是mouseover和mouseout，因为前者不会在子元素上触发事件，避免不必要的事件处理。
清除定时器是一个好习惯，可以防止在快速移动鼠标时定时器堆积导致的问题。

通过这种方式，你可以灵活地控制元素的显示和隐藏时间，以及响应用户的交互行为。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS-鼠标经过显示二级菜单

document.getElementsByTagName('li'); for(var i = 0; i < aLi.length; i++) { aLi[i].onmouseover = function() { //鼠标经过一级菜单...，二级菜单动画下拉显示出来 var sub = this.getElementsByTagName('ul')[0]; if(sub) { var This = sub...，他就是把这三个alert再执行一遍，然后你就会看到ul的长度又加了20，当你不停的上下晃动鼠标，二级菜单就会不停的添加。...难道是要给ul一个id，然后通过id获得ul下的li集合，再判断谁有二级菜单进行显示　　解决2：高度处，在判断那里，如果高度大于120了，我们就直接让高度等于120，不就得了，以后他再长，也会被这一条限制住...} } } 　　后来我也发现了收缩不干净，总是多出外面几像素，但是我把border删掉他就收缩干净了，我不知道在js

8.2K10 0

Arcgis for Js之鼠标经过显示对象名的实现

在浏览地图时，移动鼠标经过某个对象或者POI的时候，能够提示该对象的名称对用户来说是很实用的，本文讲述在Arcgis for Js中，用两种不同的方式来实现该效果。...效果2 直观的看到了效果，下面说说在Arcgis for Js中实现的两种方式。...在实现给效果的时候，有layer的两个事件，mouse-over和mouse-out事件，鼠标经过显示对象名称，鼠标移除清除显示。...1、通过TextSymbol和GraphicMarkerSymbol实现通过这种方式显示是直接用Arcgis的方式实现的，实现的代码如下，效果为效果2： function mouseOverLayer...mouseOutLayer(){ map.graphics.clear(); showTextLayer.clear(); map.setMapCursor("default"); } 2、直接用div显示

3.7K2 0

menuStrip鼠标经过自动显示菜单

//------------------------------------------------------------------------------...

1.8K1 0

AngularJS实现鼠标移入显示,鼠标移出隐藏

很简单： Mouse ove...

3.3K3 0

【CSS】鼠标移动到元素上方显示移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 ---- 1、子绝父相这里要在一个 div 盒子上方套一层遮罩 , 遮罩就需要使用绝对定位将其覆盖到其它元素中 ; 子元素使用了绝对定位..., 父元素必须使用相对定位 ; 2、显示隐藏元素对象使用 display: none; 样式隐藏元素 , 使用 display: block; 样式显示元素 ; 3、鼠标经过样式设置鼠标经过...链接时 , 显示链接中的 one 元素 , 需要使用如下选择器进行设置 ; /* 鼠标经过时 one 作为遮罩显示出来 */ .box a:hover .one { /* 设置显示元素...鼠标移动到 a 链接后显示该元素 */ .one { /* 先设置隐藏元素 */ display: none; /* 设置相对定位可以显示在父容器任意位置 */ position...1 个显示在正中心 */ background: rgba(0, 0, 0, .3) url(bg.png) no-repeat center center; } /* 鼠标经过时 one

2.9K3 0

JavaScript 鼠标滑动，图片显示隐藏

图片当一个区域需要展示多张图片，而该区域的空间大小受到限制时，我们可以通过这种方式来达到预览哪张图片就展示该图片，并隐藏其他图片的方式来达到目的，这就是简化版的手风琴效果 HTML 结构如下 <div...width:278px;height:170px;display:none;} #Tabs ul li img.xs{display:block;} 引入 jQuery 库，通过 $(this) 获取到鼠标所悬停的...li 元素，显示相应的图片，并隐藏其他图片 $("#Tabs ul li").mouseover(function(){ $("#Tabs ul li p span").removeClass

3.1K5 0

JS 控制隐藏显示

比较简单的实现.style.display就是控制层隐藏或显示的属性....style="display: none" onMouseout="hidden();"> show it div的visibility可以控制div的显示和隐藏...，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";...//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示通过设置display属性可以使div隐藏后释放占用的页面空间...("typediv1").style.display="";//显示如果用div.style.display="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了

20.7K3 0

QQ聊天插件，鼠标划入划出显示隐藏效果。

最近进行网站的二次开发，其中有一个在线客服插件，要修改一下，之前是点击显示隐藏，要改成鼠标移入移出显示隐藏。...wap_ico.jpg">二维码 js.../jquery-3.3.1.min.js"> js/qq.js"> CSS部分代码： *{padding:0;margin...online_arrow.jpg) no-repeat; position: absolute;left: 0;z-index:999;} #rightArrow a{display:block;height:45px;} js

1.2K0 0

CSS 鼠标悬停图片，显示隐藏文本

图片我在 JavaScript 鼠标悬停图片，显示隐藏文本这篇博文当中实现了同样的效果，只不过是通过 JS 来实现的，但其实，通过 CSS 动画也能实现同样的效果，直接看代码吧 HTML 结构如下

8.6K4 0

JavaScript 鼠标悬停图片，显示隐藏文本

图片当我们在浏览网页的时候，描述性的文本通常不会跟在图片之后，而是当我们将鼠标移至图片上时，才会将文本显示出来，这样的好处是，以突显图片为主，并节省布局空间 HTML 结构如下

$("#content ul li").hover(function(){//鼠标悬停在上面实现什么效果 $(this).find("div...").stop().animate({ "bottom":"0px" },1000); },function(){//鼠标离开实现什么功能

4K4 0

html title属性，鼠标悬浮,显示隐藏的文字

简介在写前端的时候，存在鼠标移动到某些元素的时候，显示文字提示的需求。这时候就可以使用title属性。设置title属性 ?

8.3K3 0

JS显示当前时间

window.setInterval('showRealTime(clock)', 1000); function...

27.7K3 0

Web前端鼠标悬停实现显示与隐藏效果

css定义，偏移量，相对定位，绝对定位显示与隐藏二维码相对于微信图标定位鼠标悬停微信图标上显示鼠标离开微信图标时隐藏什么是定位，就是定义网页标签在运行时显示的位置 css提供Position...属性用于指定元素在网页中定位的方式 background-position: 设置背景图片的显示位置 ?

4K3 0

vue鼠标移入移出显示和隐藏_labview树形控件卡

实现效果与原理我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮实现原理：是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果，再配合v-show

2.7K1 0

js显示访客浏览文章时间

博客文章页面增加访问停留时间代码，根据自己的博客系统，添加指定位置即可，其中类T-time需要根据自己css库自行设置代码食用您阅读这篇文章共花了:<span

6.4K2 0

今日作业 -- 用js控制DIV的显示隐藏

这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。...参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，，暴露出来的问题主要有二个，一是DOM查找的效率问题，这个大家自己其实都懂，我就提一下不多说了哈，，二是判断条件的选择

17.1K6 0

js获取现在时间_js中如何动态显示日期时间

js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，...在使用innerHTM方法显示。...首先我们来了解一下js获取当前时间所需的一些方法：获取当前时间： var d = new Date();//获取系统当前时间获取特定格式的时间： 1、获取当前年份 getYear()方法：可以获取年份...获取当前时间并显示示例： html+css代码 .time span{ display: inline-block; width: 40px; height...实现实时显示系统时间参考：https://blog.csdn.net/qq_36190858/article/details/86152204?

26.2K2 0

显示隐藏切换同时变化文字jquery与js实现

;}); $(".fixed-table-container").css("padding-bottom","40px"); }) }) 第二种方法js...oDiv1.style.display = 'none'; oDiv2.style.display = 'block'; //这个地方显示... oDiv2.style.display = 'none'; oDiv1.style.display = 'block'; //这个地方显示

7.6K3 0

JS 评分五角星随鼠标移动显示

如图：当鼠标放到哪个星星上时，之前的星星显示黑色星，之后的显示黑色星 ...//遍历 var td = tds[i]; td.style.cursor ='pointer'; //设置鼠标显示形式...td.onmouseover =function() { //当鼠标移动时… … var rating = document.getElementById...for (var i =0; i 鼠标之前的值 tds[i].innerText...} for (var i = index+1; i 鼠标之后的值

3.4K14 0

HTML5-JS操作页面滚动条（禁止、隐藏、显示、不显示）

不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY

10.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭