如何改变鼠标样式

最新推荐文章于 2024-09-06 13:03:47 发布
最新推荐文章于 2024-09-06 13:03:47 发布
阅读量2.5k 收藏
点赞数
文章标签： list url
如何改变鼠标样式

如何实现鼠标的不同样式？方法是：


在涂鸦板中写入：
<body style="cursor:mouse_style">
其中tag是标签名，mouse_style就是鼠标样式，如hand/crosshair/text/wait等等。

下面是各样式的大致含义。

下面是各样式的大致含义。

hand：是大家所熟悉的手型。
crosshair：是十字型。
text：是平时鼠标移动到文本上的样式。
wait：是等待的效果。
default：是默认的那种效果。
help：是带问号的鼠标样式。
e-resize：是向右的箭头。
ne-resize：是向右上方的箭头。
n-resize：是向上的箭头。
nw-resize：是向左上方的箭头。
w-resize：是向左的箭关。
sw-resize：是向左下的箭头。
s-resize：是向下的箭头。
se-resize：是向右下方的箭头。
auto：是系统自动的效果。

当然根据需要你也可以将样式应用于其它标签，或者单纯的只应用于某一段文本。如果你想在不同的位置运用不同的鼠标样式，或者不同的标签使用不同的鼠标样式（比如对在页面当中某些特定的地方时的鼠标样式进行改动），则直接将此样式写在此具体的标签里边就可以了。
——但这是对于制作网页而言了，这儿多只需要改变一种或顶多两三种。

下面举出具体的实例以方便大家对鼠标样式进行设置。

因为在这里通常是把它写入<body></body>里面，所以这里用<body>来具体说明:D

<body style="cursor:hand">hand：是大家所熟悉的手型。</body>

<body style="cursor:crosshair">crosshair：是十字型。</body>

<body style="cursor:text">text：是平时鼠标移动到文本上的样式。</body>

<body style="cursor:wait">wait：是等待的效果。</body>

<body style="cursor:default">default：是默认的那种效果。</body>

<body style="cursor:help">help：是带问号的鼠标样式。</body>

<body style="cursor:e-resize">e-resize：是向右的箭头。</body>

<body style="cursor:ne-resize">ne-resize：是向右上方的箭头。</body>

<body style="cursor:n-resize">n-resize：是向上的箭头。</body>

<body style="cursor:nw-resize">nw-resize：是向左上方的箭头。</body>

<body style="cursor:w-resize">w-resize：是向左的箭关。</body>

<body style="cursor:sw-resize">sw-resize：是向左下的箭头。</body>

<body style="cursor:s-resize">s-resize：是向下的箭头。</body>

<body style="cursor:se-resize">se-resize：是向右下方的箭头。</body>

<body style="cursor:auto">auto：是系统自动的效果。</body>

方法：
把原语句<body style="cursor:mouse_style">中的mouse_style字段换成
→→→→→→→→→→→→→→→→→★url('地址')★(★中间的部分★)
——注意★地址★和括号之间有引号哦:D
——至于这个★地址★，随便是goo是bai，有关★鼠标样式★的相关list就满天飞舞，能多到把人看到眼睛都废掉o(#T_T#)o……

说明：

1、你找来的地址，后缀名有**.cur的，还有**.ico的，和**.ani的．

2、我们这里举例改动的只是鼠标移动时的指针样式(另外还如果有兴趣可以试试改变接触链接时的指针样式，此时tag也会需要作相应的变化)。

后缀名为**.ico 的为静态
后缀名为**.cur 的为静态
后缀名为**.ani 的为动画

justsoloving
关注
185: vue+openlayers 引用hover插件，展示各种鼠标cursor样式
大剑师兰特的GIS世界
12-07 1427
本示例的目的是介绍演示如何在vue+openlayers中使用hover效果，这里是引用了一个hover插件。鼠标对应到相应的feature中时候，获取其类型，并且设定不同的鼠标样式。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他来练习1）查看基础设置：https://xiaozhuanlan.com/topic/1378924560 或者同样查看：https://blog.csdn.net/cuclife/artic
Openlayer 切换鼠标样式
西柚2015地信小白GISer
03-14 3128
this._map是Openlayer地图对象 CursorDefault() { this._map.getTargetElement().style.cursor = "default"; } CursorHelp() { this._map.getTargetElement().style.cursor = "help"; } CursorPointer() { this._map.getTargetElement().style.cursor =..
CSS中如何改变鼠标指针样式
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-06 1742
* 使用URL加载自定义光标 *//* 第一个参数是光标路径，第二个参数是备用光标 */对于一些需要高度定制化的网站，可以使用自定义光标来增加独特性。但是需要注意的是，自定义光标可能会增加页面的加载时间，因此应谨慎使用。
openlayers修改样式_Openlayers怎么实现鼠标经过显示这种样式
weixin_39863017的博客
12-22 1586
展开全部openlayers的example下的feature-events是样32313133353236313431303231363533e59b9ee7ad9431333337373732例 首先在创建图层的时候传入styleMap 当然里面定义了default 和select 的样式 ，然后在feature的事件中 选择它的渲染样式 重绘。e.feature.renderIntent =...
Openlayers4设置鼠标经过要素样式
做GIS梦的人
07-05 7070
因为实际需要，要在地图上设置鼠标经过一个矢量要素的时候，变换样式。使用Openlayers还是很容易实现的，代码如下： map.on('pointermove',function(e) { var pixel=map.getEventPixel(e.originalEvent); var feature=map.forEachFeatureAtPixel(pixel,fun...
vue3-openlayers 点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式
无心使然云中漫步
06-19 342
本篇介绍一下使用vue3-openlayers点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式。
Java改变鼠标样式，动画光标.rar
07-10
Java改变鼠标样式，动画光标，建立一个用于动画的图标数组，建立Timer对象，实例化动画图标，实例化窗口对象，增加组件到窗口上，设置窗口尺寸，设置窗口可视。。。鼠标不再是一个小箭头，而是一个会动的小宠物，在...
C#改变鼠标的指针样式
03-16
摘要:C#源码,系统相关,鼠标样式　C#程序实现改变鼠标的指针样式，将鼠标指针由Windows默认的白色变成带渐变的蓝色，看上去漂亮极了，不过，程序并不能恢复已更改的鼠标样式，可能程序有Bug，欢迎修正。
UE4UE5自定义鼠标样式-非积分
12-23
UE4UE5自定义鼠标样式
C\C++改变鼠标样式
Return的博客
02-08 3448
改变鼠标样式可以使用SetClassLong函数 HCURSOR hcur = LoadCursor(NULL, IDC_CROSS); //加载系统自带鼠标样式 HWND hwnd = GetHWnd(); // 获取绘图窗口句柄 SetClassLong(hwnd, GCL_HCURSOR, (long)hcur); 那么如果想要把鼠标样式设置为自定义的鼠标样式（.cur）呢？ HWND...
CSS 改变鼠标样式(大全)
热门推荐
小柠檬爱编程
06-17 1万+
前端经常会用到改变鼠标的样式来达到更好的页面效果,比如经常会使用到改变成小手,拖拽时改变成移动拖拽的鼠标样式,可每次都需要查阅资料来完成代码,在此做下详细总结: 使用方法: <span style="cursor:auto">Auto</span> <span style="cursor:crosshair">Crosshair</span> <span style="cursor:default">Default&..
Opnelayer学习之设置鼠标在地图上的样式
飞翔的小白
12-21 293
const CURSOR_STATE = 'default', //鼠标默认状态 /** * 设置地图中的鼠标样式 */ cursorControl(state) { // 地图中的鼠标样式 const canvases = document.getElementsByTagName('canvas') ...
arcgis for js 修改鼠标在新增点上的指针样式
淘淘小窝
12-09 2901
方便以后查找,这回多记录点东西
openlayer4设置地图的默认鼠标手势和拖拽鼠标手势
fredricen的专栏
03-23 3073
openlayer2之后，openlayer3版本有较大升级。openlayers4是3的自然升级。openlayers4中默认的地图鼠标手势都是箭头。如果需要设置为像百度、高德之类的鼠标手势，需要自行定制。设置方法很简单，完全通过控制css就可以了。地图默认手势修改： #map{ cursor:url(openhand.cur),auto; } 地图交互手势修改： ...
openlayers创建地图以及添加鼠标光标二维坐标的控件
weixin_44614518的博客
12-06 888
对小白极其友好，希望这篇文章是刚刚入门看不懂英文官网的小白的一根救命“稻草” 话不多说，先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- 引入openlayers样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/op
更换个人博客鼠标样式
天泽岁月
10-23 871
1.准备 鼠标cur文件，可以去百度找一个鼠标cur下载（致美化）。 2.使用 建一个css文件，把下面的代码复制进去: /*鼠标样式*/ body, html { cursor: url(/cur/arrow.cur), auto !important; } /* a, */ img { cursor: url(/cur/btn.cur), auto !important; } /*a标签*/ a:hover { cursor: url(/cur/link.cu.
【学习笔记之Openlayers3】要素绘制篇（第三篇）
凌往昔
01-07 5737
直接以项目实例来进行讲解要素绘制 需要用到的openlayers3中的ol.interaction.Draw 类。这是openlayers3提供的内置交互方式，除了这个用来绘制的类，还有其他的交互类，如：1.按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转，对应的交互类为ol.interactio
2021-08-02
xing_1209的博客
08-02 232
openlayer地图鼠标样式参考文章二级目录 参考文章 openlayers鼠标悬停,鼠标点击事件 openLayers 地图 鼠标移入显示坐标、显示手指、点击事件 css cursor url用法格式详解 OL2中设置鼠标的样式 网页鼠标指针样式（cursor属性） CSS - 鼠标指针样式详解（cursor光标样式、自定义指针图片） css Cursor:url()自定义鼠标指针样式为图片 二级目录 ...
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制空心圆环
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-19 553
本章讲解OpenLayers特殊图形绘制，也即使用OpenLayers实现鼠标拖拽方式绘制空心圆环的功能。
vue怎么改变鼠标样式
04-15
您可以使用CSS中的cursor属性来改变鼠标样式。例如，通过将cursor的值设置为"pointer"，可以将鼠标指针变为手形，示例代码如下： ``` .my-element { cursor: pointer; } 我是一个元素 ``` 在上面的示例中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值