CSS cursor 属性--css html 鼠标手型,鼠标形状,鼠标效果,样式

时间：2022-09-15 08:35:17
css鼠标手型cursor中hand与pointer

Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>

Example：CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br/>

注：pointer也是小手鼠标，建议大家用pointer，因为它可以兼容多种浏览器。<br/>

Example：CSS鼠标由系统自动给出效果 <a href="#" style="cursor:auto">CSS鼠标由系统自动给出效果</a><br/>

Example：CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a><br/>

Example：CSS鼠标I字型效果 <a href="#" style="cursor:text">CSS鼠标I字形效果</a><br/>

Example：CSS鼠标等待效果 <a href="#" style="cursor:wait">CSS鼠标等待效果</a><br/>

Example：CSS鼠标默认效果 <a href="#" style="cursor:default">CSS鼠标默认效果</a><br/>

Example：CSS鼠标向右的箭头效果 <a href="#" style="cursor:e-resize">CSS鼠标向右的箭头效果</a><br/>

Example：CSS鼠标向右上箭头效果 <a href="#" style="cursor:ne-resize">CSS鼠标向右上箭头效果</a><br/>

Example：CSS鼠标向上箭头效果 <a href="#" style="cursor:n-resize">CSS鼠标向上箭头效果</a><br/>

Example：CSS鼠标向左上箭头效果 <a href="#" style="cursor:nw-resize">CSS鼠标向左上箭头效果</a><br/>

Example：CSS鼠标向左箭头效果 <a href="#" style="cursor:w-resize">CSS鼠标向左箭头效果</a><br/>

Example：CSS鼠标向左下箭头效果 <a href="#" style="cursor:sw-resize">CSS鼠标向左下箭头效果</a><br/>

Example：CSS鼠标向下箭头效果 <a href="#" style="cursor:s-resize">CSS鼠标向下箭头效果</a><br/>

Example：CSS鼠标向右下箭头效果 <a href="#" style="cursor:se-resize">CSS鼠标向下箭头效果</a><br/>

CSS cursor 属性

<html>

<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:pointer">

Pointer</span><br />

<span style="cursor:move">

Move</span><br />

<span style="cursor:e-resize">

e-resize</span><br />

<span style="cursor:ne-resize">

ne-resize</span><br />

<span style="cursor:nw-resize">

nw-resize</span><br />

<span style="cursor:n-resize">

n-resize</span><br />

<span style="cursor:se-resize">

se-resize</span><br />

<span style="cursor:sw-resize">

sw-resize</span><br />

<span style="cursor:s-resize">

s-resize</span><br />

<span style="cursor:w-resize">

w-resize</span><br />

<span style="cursor:text">

text</span><br />

<span style="cursor:wait">

wait</span><br />

<span style="cursor:help">

help</span>

</body>

</html>

　　

CSS cursor 属性--css html 鼠标手型,鼠标形状,鼠标效果,样式的更多相关文章

  1. css cursor属性-显示的光标的类型&lpar;形状&rpar;的用法和定义

    在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...

  2. 光标属性CSS cursor 属性

    CSS cursor 属性 CSS cursor属性,以前不知道,如果以后用到自己看的 <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生 ...

  3. CSS：CSS cursor 属性

    ylbtech-CSS:CSS cursor 属性 1.返回顶部 1. 实例 一些不同的光标: span.crosshair {cursor:crosshair;} span.help {cursor ...

  4. 【CSS】按钮的禁用与可用 CSS Cursor 属性

    禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...

  5. CSS中cursor属性给标签加上小手形状

    HTML/CSS 2012-08-10 CSS,标签 我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头. 如今,JS在网页中的功能越 ...

  6. CSS cursor 属性

    cursor 1.定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 2 ...

  7. CSS cursor 属性改变鼠标的样式

    可能的值 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默 ...

  8. CSS cursor属性

    介绍: 该属性规定要显示的光标的类型,该属性定义了鼠标指针放在一个元素边界范围之内的时候所用的光标的形状. 常用的属性值: default:默认光标 auto:浏览器默认的光标 pointer:光标呈 ...

  9. css cursor属性详解

    cursor                       // 鼠标移上去的鼠标状态 属性值有以下: (可以将鼠标移上以下属性值看看效果) auto crosshair default pointer ...

随机推荐

  1. Xcode8控制台乱码的解决方式

    Xcode8里边 Edit Scheme-> Run -> Arguments, 在Environment Variables里边添加 OS_ACTIVITY_MODE ＝ Disable ...

  2. Redis 集群的合纵与连横

    之前一篇写了关于 Redis 的性能,这篇就写写我认为比性能更重要的扩展性方面的主题. 如果再给我一次回到好几年前的机会,对于使用 Redis 我一开始就要好好考虑将来的扩展问题.就像我们做数据库分库 ...

  3. Shader实例&colon;边缘发光和描边

    效果图: 1.边缘发光 思路:用视方向和法线方向点乘,模型越边缘的地方,它的法线和视方向越接近90度.点乘越接近0 那么用 1-减去上面点乘的结果,来作为颜色分量,来反映边缘颜色强弱. Shader ...

  4. BZOJ&lowbar;1096&lowbar;&lbrack;ZJOI2007&rsqb;&lowbar;仓库建设&lowbar;&lpar;斜率优化动态规划&plus;单调队列&plus;特殊的前缀和技巧&rpar;

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1096 有\(n\)个工厂,给出第\(i\)个工厂的到1号工厂的距离\(x[i]\),货物数量\ ...

  5. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  6. 高效使用github

    下面两个资料是我在github上面整理出来的repo,不断进行更新,将遇到的有帮助的文章尽量整理到上面,方便初学者也方便回顾学习.如果恰好你也有一些资料文章,欢迎fork - modify - pul ...

  7. mac最常用快捷键

    本人使用的是18款512g的macbookpro<后续简称mbp>,已升级最新mojave系统. 以下是我平时记录.也是使用最多的快捷键,惠存.     1.切换拼音和字母 control ...

  8. OkHttp拦截器的实现原理

    今天项目中遇到需要将从push接收到的数据按照协议parse成应用层需要的结构化数据类型问题:因为push消息类型繁多,等待解析出的结构化数据类型也多样,有的还需要经过几步的parse过程:而且因为项 ...

  9. mybatis oracle 顺序模糊匹配

    前言:有时需要顺序模糊匹配字段. 用一半的 % 就好: t.item like #{item}||'%'

  10. new Date&lpar;&rpar;的浏览器兼容性问题

    在页面中,我们使用了一个时间上的组件来开发时间选择框,在Chrome下是可以正常运行的,但是发现在IE下是无法正常工作的. 问题出在哪里呢? js从时间获取的时间字符串如果是"-" ...

相关文章