jquery,当把鼠标 移到某<div/>上时,把鼠标形状 换成自己的一个小图片。

本文详细介绍了如何使用CSS定义鼠标样式,并提供了兼容不同浏览器的解决方案,包括使用.cur文件和.gif/png文件的注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

鼠标样式这个东西挺绕的。我总结下我的经验。

首先不需要用jquery定义鼠标,css里面就有。
语法
cursor:url(你自己的路径),auto 搜索;
url里面是你自己的路径,auto实际上是后面需要跟的标准样式。
浏览器会先加载你设定路径的样式,如果没有则加载auto这里你自定义的。auto,default等等都可以。

语法很简单,但用起来不简单。
1、如果用图片(gif,png)等,不能超过32*32,否则浏览器不认识。
2、ie浏览器不认识gif,png等的图片。
3、鼠标样式文件一般是.cur .ani格式。IE都支持
4、firefox等标准浏览器不支持.ani格式。
5.firefox等标准浏览器好像也不支持动画效果的.cur文件。

CSS都支持,用jquery就多此一举了,我也写上:
$(document).ready(function(){
$(".bg").hover(
function(){$(this).css({cursor:"url(3dgnwse.cur),auto"})},
function(){$(this).css({cursor:"url(),auto"})
})
})
<div class="bg">3dgnwse.cur是你自己的文件路径</div>
总结,为了兼容各个浏览器,建议使用.cur格式鼠标文件。
你如果是gif等格式文件。上网下载制作.cur的小软件,可以制作.cur,很简单。

原文出处: http://zhidao.baidu.com/link?url=pL_TVgeqFJqs0UZuG20EmfCRWgrF2wAdFS1IbVjJEA5ACbgCbDiYwp-GRYI8cfphNKdAfiHq5SCmhJwI26BkyK
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>甜蜜约会</title> </head> <link rel="stylesheet" href="../css/Untitled-2.css" type="text/css"/> <script type="text/javascript" src="../js/Untitled-3.js"></script> <body> <div class="head"> <div class="left"><img src="../images1/logo.png" /></div> <div class="right"><img src="../images1/phone.jpg"/></div> </div> <div id="nav"> <ul class="nav"> <li><a href="#" class="color_in">首页</a></li> <li><a href="#">港式甜品</a></li> <li><a href="#">台式甜品</a></li> <li><a href="#">植物甜品</a></li> <li><a href="#">广府糖水</a></li> <li><a href="#">加盟我们</a></li> <li><a href="#">分店地址</a></li> </ul> </div> <div class="banner"> <ul class="banner_pic" id="banner_pic"> <li class="current"><img src="../images1/01.jpg" /></li> <li class="pic"><img class="one" src="../images1/02.jpg" /></li> <li class="pic"><img class="one" src="../images1/03.jpg"/></li> </ul> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> </ol> </div> <div id="learn"> <h2>甜蜜约会品牌简介</h2> <dl> <dt></dt> <dd class="tex1">想和甜蜜有个约会吗?</dd> <dd class="tex2">甜品不仅女孩子喜欢,不少男孩子也不例外,在人们越来越会享受生活的今天,甜品品牌可谓风升水起,“甜蜜约会就是其中一个。”</dd> </dl> <div class="imgbox" id="imgbox"> <span> <a href="#"><img src="../images1/1.jpg"/></a> <a href="#"><img src="../images1/2.jpg"/></a> <a href="#"><img src="../images1/3.jpg"/></a> <a href="#"><img src="../images1/4.jpg"/></a> </span> </div> </div> <div id="features"> <h2>甜蜜约会特色美食推荐</h2> <div class="list0"> <div id="SwitchBigPic"> <span class="sp"><a href="#" ><img src="../images1/111.jpg" /></a></span> <span><a href="#"><img src="../images1/222.jpg" /></a></span> <span><a href="#"><img src="../images1/333.jpg" /></a></span></div> <ul id="SwitchNav"> <li><a class="txt_img1" href="#"></a></li> <li><a class="txt_img2" href="#"></a></li> <li><a class="txt_img3" href="#"></a></li> </ul> </div> <div class="list1"> <h3></h3> <form action="#" method="post" class="biaodan"> <table class="content"> <tr> <td class="left">姓名:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">手机:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">邮箱:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left"></td> <td> <select class="course"> <option>请选择最近店铺地址</option> <option> 北京三里屯</option> <option>上海南京路3号</option> <option>广州淮阳路12号</option> <option>深圳大都会3号/</option> </select> </td> </tr> <tr> <td colspan="2"><input class="no_border" type="button" /></td> </tr> </table> </form> </div> </div> <div class="footer">甜蜜约会版权所有2020 - 2036 京 ICP 备 2232333 号  京公网安备 2342434324343</div> </body> </html> 分析一下这个html的代码
最新发布
06-21
以下是对这段HTML代码的详细分析: --- ### 1. **代码功能概述** 该HTML代码实现了一个甜品店的网页布局,包含头部、导航栏、轮播图、品牌简介、特色美食推荐、表单以及页脚等内容。整体结构清晰,使用了多种HTML标签来组织内容。 --- ### 2. **代码结构解析** #### (1) **DOCTYPE声明** ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ``` - 使用了XHTML 1.0 Transitional标准,这是一种较为宽松的HTML规范,允许某些不严格的标记(如未闭合的标签)。 --- #### (2) **头部信息** ```html <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>甜蜜约会</title> <link rel="stylesheet" href="../css/Untitled-2.css" type="text/css"/> <script type="text/javascript" src="../js/Untitled-3.js"></script> </head> ``` - `<meta>`:设置了字符编码为`gb2312`,建议改为更通用的`UTF-8`以支持更多语言。 - `<link>`:引入了外部CSS文件`Untitled-2.css`,用于定义页面样式。 - `<script>`:引入了外部JavaScript文件`Untitled-3.js`,可能用于实现交互功能。 --- #### (3) **头部区域** ```html <div class="head"> <div class="left"><img src="../images1/logo.png" /></div> <div class="right"><img src="../images1/phone.jpg"/></div> </div> ``` - `class="head"`:定义了头部容器。 - `class="left"`和`class="right"`:分别用于放置Logo图片和电话图片。 --- #### (4) **导航栏** ```html <div id="nav"> <ul class="nav"> <li><a href="#" class="color_in">首页</a></li> <li><a href="#">港式甜品</a></li> <li><a href="#">台式甜品</a></li> <li><a href="#">植物甜品</a></li> <li><a href="#">广府糖水</a></li> <li><a href="#">加盟我们</a></li> <li><a href="#">分店地址</a></li> </ul> </div> ``` - `id="nav"`:定义了导航栏容器。 - `<ul>`和`<li>`:用于创建无序列表,每个`<li>`代表一个导航项。 - `<a>`:超链接标签,点击后跳转到指定页面(当前均为`#`占位符)。 --- #### (5) **轮播图** ```html <div class="banner"> <ul class="banner_pic" id="banner_pic"> <li class="current"><img src="../images1/01.jpg" /></li> <li class="pic"><img class="one" src="../images1/02.jpg" /></li> <li class="pic"><img class="one" src="../images1/03.jpg"/></li> </ul> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> </ol> </div> ``` - `class="banner"`:定义了轮播图容器。 - `id="banner_pic"`:存放轮播图的图片列表,`class="current"`表示当前显示的图片。 - `id="button"`:存放轮播图的指示点,`class="current"`表示当前选中的指示点。 --- #### (6) **品牌简介** ```html <div id="learn"> <h2>甜蜜约会品牌简介</h2> <dl> <dt></dt> <dd class="tex1">想和甜蜜有个约会吗?</dd> <dd class="tex2">甜品不仅女孩子喜欢,不少男孩子也不例外,在人们越来越会享受生活的今天,甜品品牌可谓风升水起,“甜蜜约会就是其中一个。”</dd> </dl> <div class="imgbox" id="imgbox"> <span> <a href="#"><img src="../images1/1.jpg"/></a> <a href="#"><img src="../images1/2.jpg"/></a> <a href="#"><img src="../images1/3.jpg"/></a> <a href="#"><img src="../images1/4.jpg"/></a> </span> </div> </div> ``` - `id="learn"`:定义了品牌简介区域。 - `<dl>`、`<dt>`、`<dd>`:用于描述性列表,`<dd>`中存放简介文字。 - `class="imgbox"`:存放小图片链接。 --- #### (7) **特色美食推荐** ```html <div id="features"> <h2>甜蜜约会特色美食推荐</h2> <div class="list0"> <div id="SwitchBigPic"> <span class="sp"><a href="#"><img src="../images1/111.jpg" /></a></span> <span><a href="#"><img src="../images1/222.jpg" /></a></span> <span><a href="#"><img src="../images1/333.jpg" /></a></span> </div> <ul id="SwitchNav"> <li><a class="txt_img1" href="#"></a></li> <li><a class="txt_img2" href="#"></a></li> <li><a class="txt_img3" href="#"></a></li> </ul> </div> <div class="list1"> <h3></h3> <form action="#" method="post" class="biaodan"> <table class="content"> <tr> <td class="left">姓名:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">手机:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">邮箱:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left"></td> <td> <select class="course"> <option>请选择最近店铺地址</option> <option>北京三里屯</option> <option>上海南京路3号</option> <option>广州淮阳路12号</option> <option>深圳大都会3号/</option> </select> </td> </tr> <tr> <td colspan="2"><input class="no_border" type="button" /></td> </tr> </table> </form> </div> </div> ``` - `id="features"`:定义了特色美食推荐区域。 - `id="SwitchBigPic"`:存放大图切换内容。 - `id="SwitchNav"`:存放大图切换按钮。 - `class="list1"`:定义了表单区域,用户可以填写姓名、手机号、邮箱等信息,并选择最近店铺地址。 --- #### (8) **页脚** ```html <div class="footer">甜蜜约会版权所有2020 - 2036 京 ICP 备 2232333 号  京公网安备 2342434324343</div> ``` - `class="footer"`:定义了页脚区域,显示版权信息。 --- ### 3. **代码优化建议** 1. **字符编码**:将`charset=gb2312`改为`charset=UTF-8`,以支持更多语言。 2. **语义化标签**:可以使用`<header>`、`<nav>`、`<main>`、`<section>`、`<footer>`等HTML5语义化标签代替`<div>`。 3. **图片路径**:检查图片路径是否正确,确保资源能够正常加载。 4. **表单验证**:为表单添加前端验证逻辑,确保用户输入的数据符合要求。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值