js如何实现鼠标悬停一定时间后触发事件_IT百科

<!DOCTYPE html>

<html>

<title>闭包--自执行函数--案例--淘宝例子</title>

.container{

width: 300px

height: 150px

background-color: #16A085

}

.nav_ul{

padding: 0

list-style: none

height: 35px

}

.nav_ul li{

float: left

height: 35px

line-height: 35px

text-align: center

width: 25%

transition: all .5s

cursor: pointer

}

.select_li{

color: white

border-bottom: 2px solid #FD4401

}

.content{

width: 300px

}

.content p ul{

padding: 0

list-style: none

width: 300px

}

.content p ul li{

float: left

width: 50%

text-align: center

height: 40px

line-height: 40px

cursor: pointer

}

.content p{

position: absolute

left: 0

top: 45px

display: none

}

.content .select_p{

display: block

}

</style>

</head>

<body>

</ul>

</p>

<ul>

</ul>

</p>

<p>

<ul>

</ul>

</p>

<p>

<ul>

<li onclick="window.location.href='https://www.hao123.com/'">快乐大本营</li>

<li onclick="window.location.href='https://www.hao123.com/'">明星大侦探</li>

<li onclick="window.location.href='https://www.hao123.com/'">爸爸去哪儿</li>

</ul>

</p>

<p>

<ul>

</ul>

</p>

var liList=document.querySelector('.nav_ul').querySelectorAll('li')

var pList=document.querySelector('.content').querySelectorAll('p')

var timer=null

// 每一个li鼠标进入事件

for(var index=0index<liList.lengthindex++){

//自执行函数在一写完、一绑定的时候，不需要触发就执行

//自执行函数返回function，实际上当鼠标进入时实际上执行的是返回的函数

liList[index].onmouseenter= (function (selectIndex) {

return function () {

//增加延迟事件

timer=setTimeout(function () {

//清除所有样式 li 显示相应p中的ul 样式也去掉

for(var i=0i<liList.lengthi++){

liList[i].removeAttribute('class')

pList[i].removeAttribute('class')

}

liList[selectIndex].setAttribute('class','select_li')

pList[selectIndex].setAttribute('class','select_p')

},600)

}

}(index))

//添加鼠标移出事件，保证离开的时候清除延迟器，不影响下一次 *** 作

liList[index].onmouseleave = function (eve) {

clearTimeout(timer)

}

</script>

</body>

</html>

最近写网页前端的过程中，发现会经常用到伪类的使用，如:link,:visited,:hover,:active,:disabled等。其中:link通常表示未点击链接的状态，:visited则为已点击的状态，:hover为鼠标悬停，：active为鼠标按下到放开时链接或按钮的状态，:disabled常用于表示元素不可用时的状态。其中数鼠标悬停交互（hover/onmouseover）的方式的运用最为多样化，当css不能满足悬停事件的时候常常借助js来实现。在开发人员和设计师的脑洞下鼠标悬停事件可以有多种多样的表现形式。从交互作用上总结起来大致有以下几类：

1.最常见的是用在可点击元素或者网页链接上，常见为网址鼠标悬停显示下划线、按钮/图标悬停改变颜色等状态，若是material design风格会常将鼠标选中的卡片加重阴影，使卡片有上浮的感觉。

有些图标的鼠标悬浮会出现tips来提示按钮的含义或者作用。将用户的鼠标移动行为即时反馈，以提示人们选中了可点击的元素或者超链接，可以进行点击了。

2.用于导航中显示二级菜单/分类详情，其中选中的一级菜单链接可以直接点击显示，也可选中二级菜单进入更详细的分类页面。

需要注意的是，当导航中的每个选项都有二级菜单并且为鼠标悬停显示的时候，二级菜单的d出有一定的时间延迟会好一些，原因是如果鼠标悬停立刻显示的话，当鼠标沿着导航栏划过的时候二级菜单的显示会使人眼花缭乱，增加用户烦躁感；而若延迟出现二级菜单则可以在用户在某选项短暂停留后（用户对此选项可能有兴趣，想点击）再出现，可在相关选项聚焦其注意力。

3.显示隐藏的按钮/图标。

当某些按钮：（1）不是那么重要、（2）不希望按钮太吸引用户视线、（3）每个同类图片或模块都有相同 *** 作的按钮时，则可在用户对某板块感兴趣而将鼠标移入的时候显示该按钮。例如facebook里的广告，关闭按钮只在鼠标悬停在广告内容上才出现，相比于没有关闭按钮的贴片广告而言增加了用户的控制感，相比于关闭按钮默认一直显示的贴片广告而言可使用户在关闭前增强用户对广告的关注度，有益于广告的转化率（若关闭按钮一直显示则用户的注意力大部分会在关闭按钮上急着想关闭而容易忽视广告本身的内容。）

4.通过隐藏或弱化其它元素或者突出选中元素来聚焦用户的视线。可以在当前页面内更好地展示产品。

5.通过图片遮罩或者在选中的元素周围d出新浮层来显示相关元素的额外/更详细的信息。使用户不需要跳转页面就可以获得更多的相关信息。

6.鼠标悬停自动播放gif，在这里鼠标悬停是一个时机，悬停在gif图片上图片才变成动图播放，而不是一开始就不停地播放动图，使人眼花缭乱（这和视频很少设置为自动播放的道理是相同的）。

7.显示可切换选项，如在视频中可即时切换声音状态或者画质状态。

以上只是整理了鼠标悬停事件的几种用法，这些用法有优点也有缺点，网页元素应该根据自身特点选择是否采用鼠标悬停触发事件。欢迎批评指正。（手动笑脸）

举个粟子，写一个段落“鼠标悬停时把字体颜色变成红色，背景颜色变成灰色，离开时恢复”：

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>会变色的段落</title>

function chfgcolor(){

var e=document.getElementById("demo")

e.style.color="red"

}

function chbgcolor(){

var e=document.getElementById("demo")

e.style["background-color"]="grey"

}

function chback(){

var e=document.getElementById("demo")

e.style="color:#000000background-color:#ffffff"

}

</script>

</head>

<body>

<p id="demo" onmouseover="chfgcolor()chbgcolor()" onmouseout="chback()">这是一会变色的段落</p>

</body>

</html>

以下是运行效果截图：

代码截图

悬停前和离开后

动图

代码说明：这里面确实一次为这个段落创建了两个事件，都是DOM通用的事件，一个叫mouseover(鼠标悬停)，一个叫mouseout（鼠标离开），mouseover事件触发时要用到2个函数（function）, 分别是chfgcolor和chbgcolor, 而mouseout只用到1个chback函数。

还有，事件触发时会运行一些东西，但是不一定是函数。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11820728.html

js如何实现鼠标悬停一定时间后触发事件

发表评论

评论列表（0条）