鼠标悬停 hover?鼠标悬停什么意思

fhuyi0XCV 数码 4 0

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

最近写网页前端的过程中,发现会经常用到伪类的使用,如: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.显示可切换选项,如在视频中可即时切换声音状态或者画质状态。

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

二、编程中hover什么意思

hover,指一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

三、html中hover的用法是什么

定义和用法

:hover伪类在鼠标移到元素上时向此元素添加特殊的样式。

说明

这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML文档中一个超链接的边界范围内。理论上,其他元素也可以处于悬停状态,不过 CSS没有定义究竟是哪些元素。

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS的浏览器中以不同的方式显示出来:

a:link{color:#FF0000}/*未访问的链接*/

a:visited{color:#00FF00}/*已访问的链接*/

a:hover{color:#FF00FF}/*当有鼠标悬停在链接上*/

a:active{color:#0000FF}/*被选择的链接*/

具体的例子,你可以百度搜下 w3cshool里 CSS:hover伪类,链接我就不给了,免得被删答案。

总的来说hover是css里用来定义,当鼠标移到某个标签上时,这个标签显示的情况。一般来说hover用在a(超链接)上比较多。类似的用法有link,visited,active.

四、鼠标悬停什么意思

鼠标悬停的意思是指,当鼠标在网页的部分图标、文字或者图片上停留的时候,会有部分内容弹出知,档从这个图标、文字或者图片上移开鼠标后,弹出的内容自动缩回。

利用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。

抱歉,评论功能暂时关闭!