当鼠标移动到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 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 10: 编辑器下的UGUI Image

Image组件是Unity里显示图片的组件,可以将Sprite类型的图片显示在Canvas下。

691
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

2749
来自专栏Google Dart

AngularDart Material Design 下拉列表 顶

material-dropdown-select组件结合了material-select和material-button-down的API。

972
来自专栏向治洪

React Native之react-native-scrollable-tab-view详解

在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平...

5786
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

1836
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

1310
来自专栏杨龙飞前端

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

2354
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

1065
来自专栏hightopo

绘制SVG内容到Canvas的HTML5应用

1243
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

2785

扫码关注云+社区