css的cursor属性怎么设置

很多朋友不是很清楚css的cursor属性怎么设置,今天我们来给大家介绍一下cursor属性,以及他的语法和一个小列子,帮助大家认识cursor属性。

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过CSS设置属性为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。

cursor语法:

cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)

常用cursor光标说明

立即学习“前端免费学习笔记(深入)”;

1)、div{ cursor:default }默认正常鼠标指针

2)、div{ cursor:hand }和div{ cursor:text } 文本选择效果

3)、div{ cursor:move } 移动选择效果

4)、div{ cursor:pointer } 手指形状 链接选择效果

5)、div{ cursor:url(url图片地址) }设置对象为图片

鼠标指针说明

cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

布局结构

p { cursor: text; } /* css属性: 设置鼠标移动到html p对象时鼠标变为文本选择样式 */

a { cursor: pointer; } /* css注释: 设置鼠标移动到a属性对象时鼠标变为手指形状(链接选择) */

body { cursor: url(“小图片地址”)} /* 设置鼠标指针默认为一个小图片 */

扩展阅读:css a、css a link、a hover、css超链接样式

鼠标指针样式总结

鼠标指针样式控制设置是比较常用的,比如日常我们在DIV+CSS布局时候,我们希望鼠标指向某个局部span标签对象时候,鼠标指针光标就变为手指状态,这个时候我们就对对象span设置cursor: pointer即可。以上我们图例展示常用的鼠标光标形状与css单词,希望布局时候更加自身需要选择设置鼠标指针样式。需要注意是,光标切记勿滥用,也不要轻易设置自定义图片为鼠标样式这样会将网页造成复杂与不符合用户体验感觉,切记光标慎用。

相信经过我们的介绍,大家对于cursor属性也有了更深层次的了解。更多精彩请关注【创想鸟】其它相关文章!

相关阅读:

属性

属性

属性

以上就是css的cursor属性怎么设置的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3121530.html

(0)
上一篇 2025年3月29日 17:52:14
下一篇 2025年3月29日 17:52:21

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • CSS布局有哪些技巧

    css需要怎么布局?css布局的时候需要注意哪些方面?css布局有哪些技巧呢?今天我们就来给大家一一总结一下。如何才能有很好的css布局。 大家都知道从平面设计人员拿来的PS(图片)给CSS重构者重构时,需要对网页美工图片进行分析,只有进行…

    编程技术 2025年3月29日
    100
  • CSS3的box-shadow怎么使用

    我们知道在css3中box-shadow是盒子阴影样式单词,那我们今天就来看一下box-shadow是如何使用的,下面给大家带来一个小案列 盒子阴影样式单词:box-shadow 语法 div{box-shadow:0 0 1px #000…

    编程技术 2025年3月29日
    100
  • CSS3的text-shadow字体阴影怎么使用

    css3的text-shadow样式是设置文阴影效果,原本在css2中就有这个text-shadow,在css3中的文字阴影再次贝应用,那么我们就来看一下需要如何使用text-shadow。 CSS3单词: text-shadow 语法结构…

    编程技术 2025年3月29日
    100
  • Css3动画属性怎么使用

    今天我们来给大家说一下transform动画属性的使用方法和以及使用技巧,使用动画属性需要注意哪些方面呢?下面给大家举一个小列子。 Transform动画属性 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进…

    编程技术 2025年3月29日
    100
  • CSS3怎么做出关门开门效果

    今天给大家带来一段实例代码,怎么用css3做出关门开门的效果,需要用到的属性有border-width,  border-width等,我们一起来看一下。 border-width:边框的宽度    thin 细的             …

    编程技术 2025年3月29日
    100
  • CSS3怎么做出过渡渐变效果

    大家知道在css3里有一个过渡渐变的效果,那么这次就来和大家交流一下过渡渐变使用方法和以及使用技巧,下面给大家举一个小列子。 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 -webkit-gradi…

    编程技术 2025年3月29日
    100
  • CSS3的运动体系怎么做出来

    运动体系是css3的一个很特殊的点,我们能够创建通过运动体系来创建动画,这样就可以在许多网页中取代动画动画,flash动画和动画,对于我们网页有极大的提升 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内…

    编程技术 2025年3月29日
    100
  • CSS3怎么做出响应式布局

    今天给大家带来一个用css3做出来的响应式布局的案列,需要的朋友可以拿去借鉴使用,响应式是css3的一个特色,我们熟练掌握后手机端和pc端都可以熟练的使用。 nbsp;html>                            …

    编程技术 2025年3月29日
    100
  • css3的弹性盒怎么做出来

    有时候我们需要在css3里写一个弹性盒子,那么这个代码怎么做出来呢?这就需要用到我们的box-shadow属性了,他可以让盒子在显示的时候产生阴影效果,下面就给大家详细的说明一下 写法:        box-shadow:length l…

    编程技术 2025年3月29日
    100
  • 怎么用CSS3媒体查询

    css3的媒体查询功能,使得媒体查询得以实现,其实基本原理还是用css3媒体查询(media/meta)功能查出设备的尺寸,然后写出不同的尺寸写出或者覆盖css样式,使得界面看起来变换了。接下来就和大家说一下怎么用css3媒体查询。 esp…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论