关于鼠标悬停事件的七种用法

JavaScript011

关于鼠标悬停事件的七种用法,第1张

最近写网页前端的过程中，发现会经常用到伪类的使用，如:link,:visited,:hover,:active,:disabled等。其中:link通常表示未点击链接的状态，:visited则为已点击的状态，:hover为鼠标悬停，：active为鼠标按下到放开时链接或按钮的状态，:disabled常用于表示元素不可用时的状态。其中数鼠标悬停交互（hover/onmouseover）的方式的运用最为多样化，当css不能满足悬停事件的时候常常借助js来实现。在开发人员和设计师的脑洞下鼠标悬停事件可以有多种多样的表现形式。从交互作用上总结起来大致有以下几类：1.最常见的是用在可点击元素或者网页链接上，常见为网址鼠标悬停显示下划线、按钮/图标悬停改变颜色等状态，若是material design风格会常将鼠标选中的卡片加重阴影，使卡片有上浮的感觉。 有些图标的鼠标悬浮会出现tips来提示按钮的含义或者作用。将用户的鼠标移动行为即时反馈，以提示人们选中了可点击的元素或者超链接，可以进行点击了。2.用于导航中显示二级菜单/分类详情，其中选中的一级菜单链接可以直接点击显示，也可选中二级菜单进入更详细的分类页面。 需要注意的是，当导航中的每个选项都有二级菜单并且为鼠标悬停显示的时候，二级菜单的弹出有一定的时间延迟会好一些，原因是如果鼠标悬停立刻显示的话，当鼠标沿着导航栏划过的时候二级菜单的显示会使人眼花缭乱，增加用户烦躁感；而若延迟出现二级菜单则可以在用户在某选项短暂停留后（用户对此选项可能有兴趣，想点击）再出现，可在相关选项聚焦其注意力。3.显示隐藏的按钮/图标。 当某些按钮：（1）不是那么重要、（2）不希望按钮太吸引用户视线、（3）每个同类图片或模块都有相同操作的按钮时，则可在用户对某板块感兴趣而将鼠标移入的时候显示该按钮。例如facebook里的广告，关闭按钮只在鼠标悬停在广告内容上才出现，相比于没有关闭按钮的贴片广告而言增加了用户的控制感，相比于关闭按钮默认一直显示的贴片广告而言可使用户在关闭前增强用户对广告的关注度，有益于广告的转化率（若关闭按钮一直显示则用户的注意力大部分会在关闭按钮上急着想关闭而容易忽视广告本身的内容。）4.通过隐藏或弱化其它元素或者突出选中元素来聚焦用户的视线。可以在当前页面内更好地展示产品。5.通过图片遮罩或者在选中的元素周围弹出新浮层来显示相关元素的额外/更详细的信息。使用户不需要跳转页面就可以获得更多的相关信息。6.鼠标悬停自动播放gif，在这里鼠标悬停是一个时机，悬停在gif图片上图片才变成动图播放，而不是一开始就不停地播放动图，使人眼花缭乱（这和视频很少设置为自动播放的道理是相同的）。7.显示可切换选项，如在视频中可即时切换声音状态或者画质状态。以上只是整理了鼠标悬停事件的几种用法，这些用法有优点也有缺点，网页元素应该根据自身特点选择是否采用鼠标悬停触发事件。欢迎批评指正。（手动笑脸）

一、首先需要div布局：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>js悬停</title>

<style type="text/css">

p {

width: 200px

height: 200px

background-color: skyblue

text-align: center

line-height: 200px

}

</style>

</head>

<body>

<p id="txt">我是一个DIV</p>

<script type="text/javascript">

var txt = document.getElementById('txt')

txt.setAttribute("title","鼠标悬停了")

</script>

</body>

</html>

二、div实在的在开发工具里面的代码效果如下截图：

三、这段代码最主要的重点是如下：

<script type="text/javascript">

var txt = document.getElementById('txt')

txt.setAttribute("title","鼠标悬停了")

</script>

四、实际代码在浏览器的渲染如下：