鼠标箭头样式改变和cursor属性

要在鼠标移动到元素上方时改变鼠标样式,您可以使用内联方法结合JavaScript的onmouseover事件和CSS的cursor属性来实现。

<div id="myDiv" onmouseover="changeCursor()">
  Move your mouse over me
</div>

<script>
function changeCursor() {
    
    
  var div = document.getElementById('myDiv');
  div.style.cursor = 'pointer';
}
</script>

在上述示例中,我们在div标签的onmouseover属性中添加了changeCursor()函数作为内联方法。当鼠标移动到div元素上方时,该函数将被触发。函数内部通过修改style属性的cursor属性来改变鼠标的形状为指针(pointer)。
cursor属性有哪些值

//常见的cursor属性
auto: 默认值,浏览器自动选择适当的鼠标指针样式。
default: 默认鼠标指针样式(通常是箭头)。
pointer: 手形指针,表示可点击的链接或按钮。
text: 文本光标,表示可编辑文本的区域。
move: 移动指针,表示可拖动元素。
crosshair: 十字线指针,表示可进行精确选择的区域。
help: 帮助指针,表示提供帮助信息的区域。
not-allowed: 禁止指针,表示禁止操作的区域。
wait: 等待指针,表示正在进行加载或处理的区域。
progress: 进度指针,表示操作正在进行中的区域。
grab: 手掌形指针,表示可拖动元素。
zoom-in: 放大镜指针,表示可进行放大操作的区域。
zoom-out: 缩小镜指针,表示可进行缩小操作的区域。

猜你喜欢

转载自blog.csdn.net/z2000ky/article/details/130929788
今日推荐