CSS改变鼠标滑过默认图标

学习笔记 2016-05-09 09:42:58 44 0

【摘要】当我们在浏览图片的时候，怎么样改变鼠标的默认图标呢（如手型）。

有的时候在浏览大图片的时候，在上一张，下一张的时候，我们需要改变光标的手型，换成左右切换的图片。

请输入图片名称

下面是图片资源：

请输入图片名称

请输入图片名称

完整CSS代码如下：

```
<!DOCTYPE>
```
```
<html>
```
```
	<head>
```

		<title>改变鼠标滑过默认图标</title>

```
		<meta charset = "utf-8" />
```
```
		<style type="text/css">					
```
```
			*{
```
```
				margin:0;
```
```
				padding:0;
```
```
				font-size:12px;
```
```
			}
```
```
			.wrap{
```
```
				border:1px solid red;
```
```
				width:360px;
```
```
				height:200px;
```
```
				margin:100px auto;
```

				background:url('108_3.jpg') no-repeat;

```
				position:relative; 
```
```
			}
```
```
			.left{
```
```
				position:absolute;
```
```
				border:1px solid red;
```
```
				width:20%;
```
```
				height:100%;
```
```
				top:0;
```
```
				left:0;
```
```
				cursor:url(l.cur),default;
```
```
			}
```
```
			.right{
```
```
				position:absolute;
```
```
				border:1px solid red;
```
```
				width:20%;
```
```
				height:100%;
```
```
				top:0;
```
```
				right:0;
```
```
				cursor:url(r.cur),default;				
```
```
			}
```
```
		</style>		
```
```
	</head>
```
```
	<body>	
```
```
		<div class="wrap">
```
```
			<div class="left"></div>
```
```
			<div class="right"></div>
```
```
		</div>
```
```
	</body>	
```
```
</html>
```

即当光标滑过左右两个div的时候，光标手型将换成左右切换的图片。

版权归马富天博客所有

本文标题：《CSS改变鼠标滑过默认图标》

本文链接地址：http://www.mafutian.net/108.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶0

踩0

上一篇《 HTML5表单新的输入类型》下一篇《 jQuery快速实现可折叠上下滑动效果的菜单栏》

评论审核未开启

回复后邮件通知我

随机阅读换一批

文章分类

TOP10

浏览最多
评论最多

1. PHP快速入门（118）2. PHP微信开发快速入门（105）3. PIE解决CSS3中border-radius在IE浏览器中的兼容性（78）4. jQuery快速实现可折叠上下滑动效果的菜单栏（66）5. 使用原生JS实现页面下滑时，DIV保留在顶部位置（61）6. 5个我们需要知道的HTML5表单新特性（58）7. 介绍3个CSS中很常用的结构伪类（51）8. 网站页面代码优化的常规方法（50）9. HTML5表单新的输入类型（44）10. CSS改变鼠标滑过默认图标（44）

1. PHP快速入门（4）2. php实现pjax无刷新加载页面实例（3）3. 【面试题】加号和连接符.的优先级比较（3）4. 如何使用Eclipse安装SVN插件（3）5. PHP微信开发快速入门（3）6. 搜索引擎爬虫蜘蛛的USERAGENT大全（3）7. 如何让背景图片铺满屏幕（3）8. PHP解决MySQL数据库导出到csv中身份证号码不能完全显示问题（2）9. 说说CDN加速服务器——内容分发网络（2）10. 关于谷歌Google的网站地图sitemap.xml中（2）