1.最常见的是用在可点击元素或者网页链接上，常见为网址鼠标悬停显示下划线、按钮/图标悬停改变颜色等状态，若是material design风格会常将鼠标选中的卡片加重阴影，使卡片有上浮的感觉。
有些图标的鼠标悬浮会出现tips来提示按钮的含义或者作用。将用户的鼠标移动行为即时反馈，以提示人们选中了可点击的元素或者超链接，可以进行点击了。
2.用于导航中显示二级菜单/分类详情，其中选中的一级菜单链接可以直接点击显示，也可选中二级菜单进入更详细的分类页面。
需要注意的是，当导航中的每个选项都有二级菜单并且为鼠标悬停显示的时候，二级菜单的d出有一定的时间延迟会好一些，原因是如果鼠标悬停立刻显示的话，当鼠标沿着导航栏划过的时候二级菜单的显示会使人眼花缭乱，增加用户烦躁感；而若延迟出现二级菜单则可以在用户在某选项短暂停留后（用户对此选项可能有兴趣，想点击）再出现，可在相关选项聚焦其注意力。
3.显示隐藏的按钮/图标。
当某些按钮：（1）不是那么重要、（2）不希望按钮太吸引用户视线、（3）每个同类图片或模块都有相同 *** 作的按钮时，则可在用户对某板块感兴趣而将鼠标移入的时候显示该按钮。例如facebook里的广告，关闭按钮只在鼠标悬停在广告内容上才出现，相比于没有关闭按钮的贴片广告而言增加了用户的控制感，相比于关闭按钮默认一直显示的贴片广告而言可使用户在关闭前增强用户对广告的关注度，有益于广告的转化率（若关闭按钮一直显示则用户的注意力大部分会在关闭按钮上急着想关闭而容易忽视广告本身的内容。）
4.通过隐藏或弱化其它元素或者突出选中元素来聚焦用户的视线。可以在当前页面内更好地展示产品。
5.通过图片遮罩或者在选中的元素周围d出新浮层来显示相关元素的额外/更详细的信息。使用户不需要跳转页面就可以获得更多的相关信息。
6.鼠标悬停自动播放gif，在这里鼠标悬停是一个时机，悬停在gif图片上图片才变成动图播放，而不是一开始就不停地播放动图，使人眼花缭乱（这和视频很少设置为自动播放的道理是相同的）。
7.显示可切换选项，如在视频中可即时切换声音状态或者画质状态。
以上只是整理了鼠标悬停事件的几种用法，这些用法有优点也有缺点，网页元素应该根据自身特点选择是否采用鼠标悬停触发事件。欢迎批评指正。（手动笑脸）
鼠标悬停的意思是指，当鼠标在网页的部分图标、文字或者图片上停留的时候，会有部分内容d出知，档从这个图标、文字或者图片上移开鼠标后，d出的内容自动缩回。
利用html特性，每个标签都有一个title属性。当鼠标hover在该标签内容上时，浏览器展示出该标签的title内容，让鼠标移走，内容消失，如下：
div{
height:100px
width:100px
background-color: aqua
}
<div title="我是鼠标悬停展示的内容">文字内容文字内容</div>
扩展资料：
1、鼠标悬停会触发的一系列：
1）css伪类，:hover为鼠标悬停时触发的伪类，可利用该伪类实现，背景色，颜色，字体，边框，动画，过渡效果等元素属性的变化。
2）js当鼠标悬停，会触发mouseover事件。可在事件回调函数中处理对应的逻辑。
2、关于html标签title属性的作用：多用来完全展示hover的元素的内容，有些页面标题等内容过多会加省略号，而无法看到全部内容，会用到title。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title>闭包--自执行函数--案例--淘宝例子</title>
<style type="text/css">
.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>
<p class="container">
<p class="nav">
<ul class="nav_ul">
<li class="select_li">剧集</li>
<li>电影</li>
<li>综艺</li>
<li>动漫</li>
</ul>
</p>
<p class="content">
<p class="select_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>
<li onclick="window.location.href='https://www.hao123.com/'">高能医少</li>
</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>
<li onclick="window.location.href='https://www.hao123.com/'">变形金刚</li>
</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>
<li onclick="window.location.href='https://www.hao123.com/'">爸爸去哪儿</li>
</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>
<li onclick="window.location.href='https://www.hao123.com/'">柯南</li>
</ul>
</p>
</p>
</p>
<script>
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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）