如何用CSS设置连接鼠标在上面是变成手型

2024-12-02 10:44:12
推荐回答(5个)
回答1:

用CSS设置连接鼠标在上面变成手型的方法:只需要对需要设置鼠标指针的文字加上一个 cursor: pointer 即可实现。

具体步骤:

一、打开前端开发软件,新建一个html代码页面。

二、在新建的html代码页面上找到,在这个标签里创建一个标签,a案例中使用的是

三、为新家添加鼠标指针为手指样式。在html代码页面中找到,在这个后面创建一个<style>,然后在<style>中新建一个样式类,最后为这个样式类添加鼠标指针样式。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fc2cec3fdfc03924568e8d61c8a94a4c27d1e2547%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/c2cec3fdfc03924568e8d61c8a94a4c27d1e2547"></p> <p>四、把鼠标指针样式添加到<a>标签上。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F21a4462309f79052b690702d01f3d7ca7bcbd511%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/21a4462309f79052b690702d01f3d7ca7bcbd511"></p> <p>五、保存html代码后使用浏览器打开,当鼠标滑过<a>上的文字后即可看到鼠标变为了指针状态。</p> <p>六、直接复制以下代码到新建的html文件上,粘贴保存后使用浏览器打开即可看到效果。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F3c6d55fbb2fb431645904d692da4462309f7d311%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/3c6d55fbb2fb431645904d692da4462309f7d311"></p> <p><strong>扩展资料:</strong></p> <p>总体来说,CSS具有以下特点:</p> <p>丰富的样式定义</p> <p>CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。</p> <p>易于使用和修改</p> <p>CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。</p> <p>另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。</p> <p>多页面应用</p> <p>CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。</p> <p>层叠</p> <p>简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。</p> <p>页面压缩</p> <p>在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。</p> <p><strong>参考资料:</strong></p> <p><strong>CSS——百度百科<br></strong></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答2:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>具体步骤:</p> <p>一、打开前端开发软件,新建一个html代码页面。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F4afbfbedab64034f6f53263da2c379310a551d6a%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/4afbfbedab64034f6f53263da2c379310a551d6a"></p> <p>二、在新建的html代码页面上找到<body>,在这个<body>标签里创建一个标签,a案例中使用的是<a>。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F77c6a7efce1b9d164d1a7e5afedeb48f8c546428%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/77c6a7efce1b9d164d1a7e5afedeb48f8c546428"></p> <p>三、为新家<a>添加鼠标指针为手指样式。在html代码页面中找到<tilte>,在这个<title>后面创建一个<style>,然后在<style>中新建一个样式类,最后为这个样式类添加鼠标指针样式。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F94cad1c8a786c917a2deb602c43d70cf3bc75728%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/94cad1c8a786c917a2deb602c43d70cf3bc75728"></p> <p>四、把鼠标指针样式添加到<a>标签上。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F1e30e924b899a9017387bf0d10950a7b0208f55f%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/1e30e924b899a9017387bf0d10950a7b0208f55f"></p> <p>五、保存html代码后使用浏览器打开,当鼠标滑过<a>上的文字后即可看到鼠标变为了指针状态。</p> <p>六、直接复制以下代码到新建的html文件上,粘贴保存后使用浏览器打开即可看到效果。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F78310a55b319ebc4a9e692a28f26cffc1e17166a%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/78310a55b319ebc4a9e692a28f26cffc1e17166a"></p> <p><strong>拓展资料:</strong></p> <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> <p>CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。</p> <p>CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。</p> <p>名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。</p> <p><strong>参考资料:</strong></p> <p>CSS—百度百科<br></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答3:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>1.用css控制的语法如下:</p> <p><span style="cursor:*">文本或其它页面元素</span></p> <p>把 * 换成如下15个效果的一种:</p> <p>hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。</p> <p>2.这个在CSS里头默认是有设置的。<br><br>部分浏览器支持 cursor:hand;几乎所有浏览器都支持 cursor:pointer</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F94cad1c8a786c9175ab9ee3ac43d70cf3bc7577e%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/94cad1c8a786c9175ab9ee3ac43d70cf3bc7577e"></p> <p><strong>扩展资料:</strong></p> <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[1] </p> <p>CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。</p> <p>参考资料来源:百度百科:CSS(层叠样式表)</p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答4:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>1.用css控制的语法如下:</p> <p><span style="cursor:*">文本或其它页面元素</span></p> <p>把 * 换成如下15个效果的一种:</p> <p>hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。</p> <p>2.这个在CSS里头默认是有设置的。<br><br>部分浏览器支持 cursor:hand;<br>几乎所有浏览器都支持 cursor:pointer</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F30adcbef76094b36f7fc23c3aecc7cd98d109db5%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/30adcbef76094b36f7fc23c3aecc7cd98d109db5"></p> <p><strong>扩展资料</strong></p> <p>jQuery 中非常重要的部分,就是操作 DOM 的能力。</p> <p>jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。</p> <p>提示:DOM = Document Object Model(文档对象模型)</p> <p>DOM 定义访问 HTML 和 XML 文档的标准:</p> <p>“W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”</p> <p><strong><br></strong><br></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答5:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>在CSS里头默认是有设置的。<br><br>部分浏览器支持 cursor:hand;<br>几乎所有浏览器都支持 cursor:pointer</p> <p><strong>常用cursor光标说明:</strong></p> <p>1)div{ cursor:default }默认正常鼠标指针<br>2)div{ cursor:hand }和div{ cursor:text } 文本选择效果<br>3)div{ cursor:move } 移动选择效果<br>4)div{ cursor:pointer } 手指形状 链接选择效果<br>5)div{ cursor:url(url图片地址) }设置对象为图片</p> <p><strong>cursor样式效果图:</strong></p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fa8773912b31bb0515ef2de8d3a7adab44bede045%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/a8773912b31bb0515ef2de8d3a7adab44bede045"></p> <p><strong>鼠标指针说明 </strong><br>cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 </p> <p><strong>布局结构 </strong><br>p { cursor: text; } /* css注释: 设置鼠标移动到html p对象时鼠标变为文本选择样式 */ <br>a { cursor: pointer; } /* css注释: 设置鼠标移动到a超链接对象时鼠标变为手指形状(链接选择) */ <br>body { cursor: url(“小图片地址”)} /* 设置鼠标指针默认为一个小图片 */ </p></p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="wendaright"> <div class="wdluluerwema"> <div class="wdxgwttop">相关问答</div> <div class="wdxgwtnr"> </div> <div class="clear"></div> </div> <!-- 其他随机问答['id'=>alphaID($like['zid'])] --> <div class="wdluluerwema"> <div class="wdxgwttop">最新问答</div> <div class="wdxgwtnr"> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/1772454130531727180.html">恋爱谈了很久男友为啥不愿带女友去他家看看</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/447999117.html">谁有4399弹弹堂2的刷点卷挂啊,武器挂也行,(免费的)没病毒的,谢谢+QQ786693362</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/499695155654231604.html">北京地坛公园在几环,外地车辆可以开车去吗,附近有没有免费停车场</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/1542050145872027827.html">新买的踏板摩托车冷车启动过几秒就会熄火,然后再启动就要加油门才能启动,而且冷车刚启动的时候加油门就</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/88263606.html">黄河对于中国人民的意义</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/574989964.html">有首歌歌词有 我不需要你的怜悯和同情,这样的爱我宁愿全部放弃。</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/1945857652222189748.html">数控铣床和数控车床有什么区别</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/451238675.html">qq炫舞角色查询</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/106747674.html">乐山最好的画室是那个呢?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://13l.net/l/1797712388199763907.html">女朋友说不想看到我,在我的逼问下,她说分手行吗?我当时我一生气我就走了!可是我就不明白为什么分手!</a></div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer"> <!-- 移动底部导航 --> <div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://13l.net/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div> <div class="dibu"> <div class="dibu"> </div> </div> <div class="banquan"> <p>内容全部来源于网络收集,如有侵权,请联系网站删除:QQ:24596024</p> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?de17be6dbd20544dd6483cc235b540f9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>