js动态该表鼠标样式,js自定义鼠标样式

发布时间：2023-12-08

js动态该表鼠标样式,js自定义鼠标样式

更新：2022-11-26 01:38

本文目录一览：

  1. JS动态该表鼠标样式，鼠标放在图片上，鼠标指针变成放大镜形状
  2. js css 自定义鼠标的样式
  3. javascript 改变鼠标样式
  4. JS 或者Jquery怎么实现：点击一个按钮之后鼠标样式改变，然后单击一次之后变回正常形状

JS动态该表鼠标样式，鼠标放在图片上，鼠标指针变成放大镜形状

可以使用CSS来控制：

.class {
  cursor: url('路径'), auto;
}

cursor 是支持自定义图标的。你只要定义该元素的样式，给定路径后，就可以加载。不过要注意的是，考虑到IE的兼容性问题，最好使用 .ico 或 .cur 格式的文件，分辨率最好是 32×32。

js css 自定义鼠标的样式

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>

CSS3 的代码：

/* 设置 url 还可以自定义图片 */

javascript 改变鼠标样式

不需要 JS，使用 CSS 就可以实现，定义单元格的样式如下：

<td style="cursor:hand">...</td>

如果必须用 JS 实现的话，可以给单元格添加 mouseover 和 mouseout 事件，然后使用：

cellid.style.cursor = "hand"; // 设置为手型
cellid.style.cursor = "default"; // 恢复默认

其中 cellid 是单元格的 id。

JS 或者Jquery怎么实现：点击一个按钮之后鼠标样式改变，然后单击一次之后变回正常形状

直接修改元素的 cursor 属性即可！例如你要修改 body 的 cursor 属性：

$("button#1").bind('click', function() {
  if ($("body").css('cursor') == 'crosshair') {
    $("body").css('cursor', 'default');
  } else {
    $("body").css('cursor', 'crosshair');
  }
});

然后你要将这个鼠标样式应用到哪一个元素上，就修改这个元素的 cursor 即可。

推荐文章