当鼠标移动到div或者超链接只上时,显示相应的鼠标形状

在HTML中很多情况都会要求我们当鼠标移动上去的时候显示相应的形状出来,要么是手型或者箭头这种之类的。

下面我就以超链接为例子,给大家介绍一下怎么实现这一过程。

其实特别简单只要给组件添加相应的样式就可以实现这样的效果了。这种样式叫做cursor属性

下面给出例子代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="#" style="cursor:hand">CSS鼠标手型效果</a><br><br>
<a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br><br>
<a href="#" style="cursor:crosshair">CSS鼠标十字型效果</a><br><br>
<a href="#"style="cursor:help">CSS鼠标问号效果</a><br><br>
<a href="#"style="cursor:text">是移动到文本上的那种效果</a><br><br>
<a href="#" style="cursor:wait">是等待的那种效果</a><br><br>
<a href="#" style="cursor:default">是默认效果</a><br><br>
<a href="#" style="cursor:e-resize">是向右的箭头</a><br><br>
<a href="#"style="cursor:ne-resize">是向右上的箭头</a><br><br>
<a href="#"style="cursor:n-resize">是向上的箭头</a><br><br>
<a href="#"style="cursor:nw-resize">是向左上的箭头</a><br><br>
<a href="#"style="cursor:w-resize">是向左的箭头</a><br><br>
<a href="#" style="cursor:sw-resize">是左下的箭头</a><br><br>
<a href="#" style="cursor:s-resize">是向下的箭头</a><br><br>
<a href="#" style="cursor:se-resize">是向右下的箭头</a><br><br>
<a href="#"style="cursor:auto">是由系统自动给出效果</a><br><br>
</body>
</html>

运行的效果大家可以自己去试一下,非常简单。

这里需要注意的是:style=“cursor:hand”这个样式只要加在相应的组件上面就可以实现相应的鼠标形状功能了。

例如:放在div上面就可以这么写:<div style="cursor:hand"></div>这样就可以实现鼠标移动到div上面的时候出现手型了。

还有几点需要注意的是:

一:style=“cursor:hand”,style=“cursor:pointer”这两个虽然都是手型,可以style=“cursor:pointer”的兼容性比style=“cursor:hand”要好,所以如果要使用手型的话推荐大家使用style=“cursor:pointer”这种方式来实现。

二:style=“cursor:auto”这个样式的形状和浏览器有关系,Google,火狐,IE可能出来的形状都不大一样。

三:那些带有上下箭头的形状,经过本人测试其实都一样,因为是双向箭头,所以没有箭头朝向的区别。但是这也有可能是浏览器的缘故,因为我只测试过Google,火狐,IE这三个浏览器。

如博客内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

603
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3214
来自专栏非著名程序员

Android 自定义标签 ViewLayout

自定义viewLayout实现标签View,UI的效果图如下: ? 如图,我们要自己实现带描边的,带花括号的,带三角形,带对勾的这样一个layout ,并且对...

19810
来自专栏Android小菜鸡

自定义View学习之路(五)————彩虹环

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的彩虹环为例。开始系统的学习View的绘制。 彩虹环需求:

592
来自专栏互联网杂技

微信小程序设计规范(官方)文档

image.png 为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便开发者调用的资源。 基础样式库预览地址:https...

3988
来自专栏Coco的专栏

滚动视差?CSS 不在话下

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的...

1977
来自专栏何俊林

打造狂拽炫酷的主流自定义侧滑控件(仿酷狗和QQ5.0)

前言:自定义侧滑控件是一直是很多在app端的软件用的比较多的方式,本文来自 Mero技术博客授权本公众号独家发布文章,Mero技术博客blog地址:http:/...

18110
来自专栏DeveWork

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色...

2016
来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。 如何让自己的网站也响应式Web设计,可以响...

1977
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

1905

扫码关注云+社区