首页前端开发CSScss怎么改变鼠标样式

css怎么改变鼠标样式

时间2024-01-27 22:34:03发布访客分类CSS浏览388
导读:收集整理的这篇文章主要介绍了css怎么改变鼠标样式,觉得挺不错的,现在分享给大家,也给大家做个参考。在css中,可以通过cursor属性来设置鼠标样式,语法格式“cursor:值;”。cursor属性用于规定要显示的光标的类型(形状),可以...
收集整理的这篇文章主要介绍了css怎么改变鼠标样式,觉得挺不错的,现在分享给大家,也给大家做个参考。

在css中,可以通过cursor属性来设置鼠标样式,语法格式“cursor:值; ”。cursor属性用于规定要显示的光标的类型(形状),可以设置鼠标指针放在一个元素边界范围内时所用的光标形状。

本文操作环境:Windows7系统、HTML5& & CSS3版,DELL G3电脑

有些时候我们并不想加文字,图片以及链接,却想要加链接时的鼠标样式。这就用到了我们的css中的cursor来设置鼠标指针形状。

cursor属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

下面就是鼠标指针cursor属性的一些属性值:

实例:

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
     tITle>
    /title>
     /head>
    body>
    p>
    请把鼠标移动到单词上:/p>
    span style="cursor:auto">
    auto/span>
    br>
    span style="cursor:crosshair">
    crosshair/span>
    br>
    span style="cursor:default">
    default/span>
    br>
    span style="cursor:e-resize">
    e-resize/span>
    br>
    span style="cursor:help">
    help/span>
    br>
    span style="cursor:move">
    move/span>
    br>
    span style="cursor:n-resize">
    n-resize/span>
    br>
    span style="cursor:ne-resize">
    ne-resize/span>
    br>
    span style="cursor:nw-resize">
    nw-resize/span>
    br>
    span style="cursor:pointer">
    pointer/span>
    br>
    span style="cursor:PRogress">
    progress/span>
    br>
    span style="cursor:s-resize">
    s-resize/span>
    br>
    span style="cursor:se-resize">
    se-resize/span>
    br>
    span style="cursor:sw-resize">
    sw-resize/span>
    br>
    span style="cursor:text">
    text/span>
    br>
    span style="cursor:w-resize">
    w-resize/span>
    br>
    span style="cursor:wait">
    wait/span>
    br>
    /body>
    /html>
    

这样鼠标就变成我们需要的了。

说明:

还有一种用法其原理是:利用了CSS2的一个cursor的属性cursor:url (url),鼠标文件可以使用jpggifanicur多种文件格式。需要注意的这种方式只能在IE5.5以上浏览器中正常显示。

推荐学习:《css视频教程》

以上就是css怎么改变鼠标样式的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: css水平居中怎么设置下一篇:什么是css继承猜你在找的CSS相关文章 css怎么控制按钮不可用2022-05-17css3中transform属性实现的4种功能2022-04-13纯CSS3实现div按照顺序出入效果2022-04-13CSS实现隐藏搜索框功能(动画正反向序列)2022-04-13使用CSS3实现按钮悬停闪烁动态特效代码2022-04-13CSS3 Tab动画实例之背景切换动态效果2022-04-13CSS实现两列布局的N种方法2022-04-13CSS 实现Chrome标签栏的技巧2022-04-13css实现两栏布局左侧固定宽右侧自适应的多种方法2022-04-13从QQtabBar看css命名规范BEM的详细介绍2022-04-13 其他相关热搜词更多phpjavapython程序员

若转载请注明出处: css怎么改变鼠标样式
本文地址: https://pptw.com/jishu/588806.html
css 多种背景的使用场景和技巧以及好处 css改变滚动条样式

游客 回复需填写必要信息