如何用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 class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/1436549742066002699.html" title="如何用CSS设置连接鼠标在上面变成手型?">如何用CSS设置连接鼠标在上面变成手型?</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/306407571564448084.html" title="css鼠标放上去把箭头变成手一样的样式怎么写">css鼠标放上去把箭头变成手一样的样式怎么写</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/11837198.html" title="css中鼠标在链接处变成的&quot;小手&quot;图标怎样改成别的样子?">css中鼠标在链接处变成的&quot;小手&quot;图标怎样改成别的样子?</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/217060473.html" title="html 中如何让鼠标箭头移到某个div上就变为手型,移出后...">html 中如何让鼠标箭头移到某个div上就变为手型,移出后...</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/629770334716135084.html" title="html中鼠标如何设置显示小手状?">html中鼠标如何设置显示小手状?</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/1900559472761395780.html" title="怎么用css设置鼠标手型">怎么用css设置鼠标手型</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/2208266160748782348.html" title="CSS+DIV鼠标放到文字上,原本带箭头的鼠标变成手状的形状...">CSS+DIV鼠标放到文字上,原本带箭头的鼠标变成手状的形状...</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/345342068.html" title="CSS+DIV鼠标放到文字上,原本带箭头的鼠标变成手状的形状...">CSS+DIV鼠标放到文字上,原本带箭头的鼠标变成手状的形状...</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> </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://58z.net/z/750333871727501692.html">治疗疑难杂症哪个地方好?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/571660897.html">我是卖家,为什么双方评价之后,我只能在评价管理里面看到,在淘宝店铺看不到,急!急!急!</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/680540213199204812.html">psp无双大蛇哪个版本最好玩,为什么</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/595711819.html">电脑关不了机是怎么回事,其他什么都很正常 但是点开始菜单里面的关机没反映是怎么回事?本本WIN7系统</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/312384453.html">求一篇阿拉丁神灯中文的200字读后感,快!</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/537166958.html">提问和回答经常“未能成功提交或已失效”是怎么回事?如何解决?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/1805634132296449747.html">t7次列车时刻表途径站</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/609899178.html">潍坊订婚习俗是怎样的讲究</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/1049153649226086259.html">四十五团到库尔乐有多远</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/588070195.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://58z.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?bc215519b6d2b72984cdb0a467b5dcf6"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>