鼠标指针变化【web前端】

最新推荐文章于 2024-10-16 11:07:21 发布

原创最新推荐文章于 2024-10-16 11:07:21 发布 · 666 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

8 篇文章

订阅专栏

本文探讨了如何在Web前端中通过CSS和JavaScript实现鼠标指针的动态变化，包括不同交互状态下的定制化图标和行为，助力提升用户体验。

鼠标指针变化

<html>
    <meta charset="utf-8">
    <head>
        <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: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><br />
<span style="cursor:no-drop">no-drop</span>
</body>
</html>