CSS各种鼠标手型集合及应用示例

在网页设计中，鼠标手型的样式可以为用户提供更直观、交互性更强的体验。通过使用CSS，我们可以轻松地改变鼠标的样式，以适应不同的用户行为和交互需求。本文将介绍一些常见的鼠标手型样式，并提供相应的应用示例。

1. 默认样式（cursor: auto）

默认情况下，浏览器会自动根据元素类型和上下文来确定鼠标手型的样式。通常情况下，链接（）元素显示为手型，文本输入区域（、）显示为I形光标，其他元素则显示为箭头。如果需要恢复到默认样式，可以使用 cursor: auto;。</p><pre><code><span>.default-cursor</span> { <span>cursor</span>: auto; } </code></pre><h2>2. 箭头（cursor: default）</h2><p>箭头样式是默认样式的一种，它表示普通的指针或光标。这是大多数情况下最常见的鼠标手型样式。</p><pre><code><span>.arrow-cursor</span> { <span>cursor</span>: default; } </code></pre><h2>3. 手型（cursor: pointer）</h2><p>当鼠标悬停在链接上时，手型样式会给用户一个明确的提示，表明该元素可点击。除了链接元素，我们还可以将手型样式应用于其他可交互的元素（如按钮）。</p><pre><code><span>.pointer-cursor</span> { <span>cursor</span>: pointer; } </code></pre><h2>4. 文本选择（cursor: text）</h2><p>当鼠标悬停在可编辑文本区域时，文本选择样式会显示为I形光标，表示用户可以输入或选择文本。此样式也可应用于自定义的文本输入区域。</p><pre><code><span>.text-cursor</span> { <span>cursor</span>: text; } </code></pre><h2>5. 移动（cursor: move）</h2><p>移动样式常用于拖动元素的操作上。当鼠标悬停在可移动的元素上时，移动样式会显示为一个四向箭头，表示该元素可以被拖动。</p><pre><code><span>.move-cursor</span> { <span>cursor</span>: move; } </code></pre><h2>6. 缩放（cursor: zoom-in / cursor: zoom-out）</h2><p>缩放样式用于指示元素可以进行放大或缩小操作。当鼠标悬停在可缩放的元素上时，缩放样式会显示为放大镜加号（zoom-in）或减号（zoom-out）。</p><pre><code><span>.zoom-in-cursor</span> { <span>cursor</span>: zoom-in; } <span>.zoom-out-cursor</span> { <span>cursor</span>: zoom-out; } </code></pre><h2>7. 禁止（cursor: not-allowed）</h2><p>禁止样式通常用于表示某个操作无法执行或不可用的状态。当鼠标悬停在禁止操作的元素上时，禁止样式会显示为一个圆圈和一条斜线。</p><pre><code><span>.not-allowed-cursor</span> { <span>cursor</span>: not-allowed; } </code></pre><h2>8. 自定义鼠标样式（cursor: url('custom.cur'), auto;）</h2><p>除了使用预定义的鼠标手型样式，我们还可以通过自定义图片来创建独特的鼠标样式。该方法需要提供一个指向自定义图片的URL，并使用 url('custom.cur') 的形式进行引用。</p><pre><code><span>.custom-cursor</span> { <span>cursor</span>: <span>url</span>(<span>'custom.cur'</span>), auto; } </code></pre><p>以上是一些常见的鼠标手型样式及其应用示例。通过灵活运用这些样式，我们可以为用户提供更加丰富、直观的交互体验，从而增强网页的可用性和用户吸引力。</p><p><br></p> </div> <div class="tag">标签： </div> <div class="use-tip"> <h3>版权声明</h3> <p><b>1. 本站所有素材，仅限学习交流，仅展示部分内容，如需查看完整内容，请下载原文件。</b><br> 2. 会员在本站下载的所有素材，只拥有使用权，著作权归原作者所有。<br> 3. 所有素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。<br> 4. 如果素材损害你的权益请联系客服QQ：<a href="tencent://message/?uin=77594475">77594475</a> 处理。 </p> </div> </div> <div class="main-relate hidden-sm hidden-xs"> <div class="module-title-box"><h2 class="title">相关素材</h2></div> <ul class="module-list"> </ul> </div> </div> <div class="main-right col-xl-3 col-lg-3 col-md-3 hidden-sm hidden-xs"> <div class="side-box-dw"></div> <div class="side-fixed-box"> <div class="side shadow"> <div class="module-title-box mb15"><h2 class="title">热门文章</h2></div> <ul class="side-article-list mt25"> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31655.html" title="Python Django访问static静态文件的实现方法和配置指南" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31655.html" title="Python Django访问static静态文件的实现方法和配置指南">Python Django访问static静态文件的实现方法和配置指南</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(1)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31654.html" title="Spring Boot中如何使用Jackson进行数据处理和转换" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31654.html" title="Spring Boot中如何使用Jackson进行数据处理和转换">Spring Boot中如何使用Jackson进行数据处理和转换</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(1)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31653.html" title="获取给定Pandas数据框架中特定行的方法和示例代码" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31653.html" title="获取给定Pandas数据框架中特定行的方法和示例代码">获取给定Pandas数据框架中特定行的方法和示例代码</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(2)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31652.html" title="Python中type()函数的作用和用法详解" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31652.html" title="Python中type()函数的作用和用法详解">Python中type()函数的作用和用法详解</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(1)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31651.html" title="Python中list、set和tuple的区别和用途简介" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31651.html" title="Python中list、set和tuple的区别和用途简介">Python中list、set和tuple的区别和用途简介</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(2)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31650.html" title="解决MySQL报2006错误的错误处理方法（数据过大）" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31650.html" title="解决MySQL报2006错误的错误处理方法（数据过大）">解决MySQL报2006错误的错误处理方法（数据过大）</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(1)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31649.html" title="Python中定义二维数组矩阵的方法和示例代码" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31649.html" title="Python中定义二维数组矩阵的方法和示例代码">Python中定义二维数组矩阵的方法和示例代码</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(1)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31648.html" title="Pandas DataFrame的pivot()和unstack()函数实现行列转换" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31648.html" title="Pandas DataFrame的pivot()和unstack()函数实现行列转换">Pandas DataFrame的pivot()和unstack()函数实现行列转换</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(3)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31647.html" title="Java中输入多行字符串或多个整数的方法和技巧分享" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31647.html" title="Java中输入多行字符串或多个整数的方法和技巧分享">Java中输入多行字符串或多个整数的方法和技巧分享</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(2)</span></p> </div> </div> </li> <li class="clearfix mb15"> <div class="article-list_box"> <span class="article-list_thumb col-xl-3 fl"> <a class="wide img-box" href="/zhishi/31646.html" title="在HTML中使用JavaScript自定义字符串格式化的实现方法" data-ratio="70" style="background-image: url(/static/assets/images/nopic.gif);"></a> </span> <div class="side-article-list_detail col-xl-9 fl"> <h4 class="title txt-ov"><a href="/zhishi/31646.html" title="在HTML中使用JavaScript自定义字符串格式化的实现方法">在HTML中使用JavaScript自定义字符串格式化的实现方法</a></h4> <p class="meta"><time><i class="fa fa-clock-o"></i> 2025-02-27</time><span class="pv"><i class="fa fa-eye"></i> 阅读(2)</span></p> </div> </div> </li> </ul> </div> <div class="side shadow mt20"> <div class="module-title-box mb15"><h2 class="title">随机推荐</h2></div> <div class="tag side_tag"> </div> </div> </div> </div> </div> </div> <div class="main-box-dw"></div> <div class="scroll-to-top hidden-sm hidden-xs" id="toTop"> <i class="bi bi-arrow-up-circle-fill"></i> </div> <!-- 底部 --> <div class="footer"> <div class="container"> <div class="flex justify-center"> <span class="hidden-sm hidden-xs">© CopyRight 2022 文汇知识网</span> <a class="ml10 mr10" href="https://beian.miit.gov.cn" target="_blank">滇ICP备2022006959号-4</a> <span class="hidden-sm hidden-xs"><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f0f56f82f7c67c360794e2549e59d9cd"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://news.zzszq.net/">深知资讯网</a><a href="http://tv.zzszq.net/">深视网</a><a href="http://www.80hlw.com/">80商务</a></span> </div> </div> </div> <!-- 会员登录 --> <div id="login_box" class="hidden fixed"> <div class="login_box_title"> <h4 class="tc">会员登录</h4> <button id="close_login"><i class="fa fa-close"></i></button> </div> <form class="login-form" id="myform" action="" method="post"> <div class="form-group"> <input class="form-control" type="text" autocomplete="off" placeholder="会员名/邮箱/手机" name="data[username]" /> </div> <div class="form-group"> <input class="form-control" type="password" autocomplete="off" placeholder="登录密码" name="data[password]" /> </div> <div class="form-group"> <div class="col-6 pl0 pr0 fl"> <input class="form-control" type="text" autocomplete="off" placeholder="验证码" name="code" /> </div> <div class="col-6 tr fr"> <img align="absmiddle" style="cursor:pointer;" onclick="this.src='/index.php?s=api&c=api&m=captcha&width=120&height=35&t='+Math.random();" src="/index.php?s=api&c=api&m=captcha&width=120&height=35" /> </div> <div class="clearfix"></div> </div> <div class="form-group"> <button type="button" onclick="dr_ajax_member('http://www.wenhuiw.com/index.php?s=member&c=login&m=index', 'myform');" class="btn bg-green">登录</button> </div> <div class="form-group"> <a href="http://www.wenhuiw.com/index.php?s=member&c=register&m=index" id="register-btn" class="fr">注册账号</a> <input type="checkbox" name="remember" value="1" checked="checked" style="vertical-align: -2px;"/> 记住我 <a href="http://www.wenhuiw.com/index.php?s=member&c=login&m=find">忘记密码</a> </div> <div class="form-group tc"> <!--<p class="text-muted">第三方快捷登录</p>--> </div> </form> </div> <div class="mask-body mask-body-dark" style="display: none;"></div> <script src="/static/x2h-002/js/swiper-bundle.min.js"></script> <script src="/static/x2h-002/js/jquery.lazyload.js"></script> <script src="/static/x2h-002/js/common.js"></script> <script> $(function () { $.ajax({ type: "GET",dataType:"json", url: "/index.php?s=api&c=run&is_ajax=1&num=5" }); }); </script> </body> </html>