马富天PHP博客

CSS改变鼠标滑过默认图标

学习笔记 马富天 2016-05-09 09:42:58 48 0

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

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

请输入图片名称

下面是图片资源:

请输入图片名称请输入图片名称

完整CSS代码如下:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>改变鼠标滑过默认图标</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}
  12. 			.wrap{
  13. 				border:1px solid red;
  14. 				width:360px;
  15. 				height:200px;
  16. 				margin:100px auto;
  17. 				background:url('108_3.jpg') no-repeat;
  18. 				position:relative; 
  19. 			}
  20. 			.left{
  21. 				position:absolute;
  22. 				border:1px solid red;
  23. 				width:20%;
  24. 				height:100%;
  25. 				top:0;
  26. 				left:0;
  27. 				cursor:url(l.cur),default;
  28. 			}
  29. 			.right{
  30. 				position:absolute;
  31. 				border:1px solid red;
  32. 				width:20%;
  33. 				height:100%;
  34. 				top:0;
  35. 				right:0;
  36. 				cursor:url(r.cur),default;				
  37. 			}
  38. 		</style>		
  39. 	</head>
  40. 	<body>	
  41. 		<div class="wrap">
  42. 			<div class="left"></div>
  43. 			<div class="right"></div>
  44. 		</div>
  45. 	</body>	
  46. </html>

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

版权归 马富天PHP博客 所有

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

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

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

0

0

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

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码