Css改变鼠标形状的15种效果代码

2016-02-19 18:28 37 1 收藏

下面图老师小编跟大家分享一个简单易学的Css改变鼠标形状的15种效果代码教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。但用css可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。

用css控制的语法如下:

文本或其它页面元素

　　把 * 换成如下15个效果的一种：
　　hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。

下面是对这15种效果的解释。移动鼠标到解释上面，看看你的鼠标起了什么变化吧！

hand是手型
       crosshair是十字型
      text是移动到文本上的那种效果
      wait是等待的那种效果
      default是默认效果
      help是问号
      e-resize是向右的箭头
      ne-resize是向右上的箭头
     n-resize是向上的箭头
     nw-resize是向左上的箭头
     w-resize是向左的箭头
     sw-resize是左下的箭头
     s-resize是向下的箭头
     se-resize是向右下的箭头
     auto是由系统自动给出效果

来源:http://www.tulaoshi.com/n/20160219/1617819.html

上一篇： CSS学习之样式表基础知识
下一篇：粘贴预览 Excel2010粘贴效果未卜先知

看过《Css改变鼠标形状的15种效果代码》的人还看了以下文章更多>>

一个鼠标效果代码简单易懂效果不错的

var posYoubiao:Array = new Array(); posYoubiao[0] = 5; for (i=1; i<6; i++) { //预先设置好游标的位置 posYoubiao[i] ...

完全CSS写的鼠标悬停tip效果

标签： Html CSS布局 Div+CSS XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd" <html xmlns="http://www.w3.org/1999/xhtml" <head <meta http-equiv="Content-Type" content="text/html; charset=GB2312" / <meta name="Author" content="Aultoale" / <style type="text/CSS" body {f...

巧妙运用CSS样式表立刻改变鼠标的样式

标签： Web开发

用惯了Windows的人对各种各样的鼠标样式一定不会陌生。当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形，在其它地方似乎没有什么变化，同充满动感的网页显得不怎么和谐。实际上，用CSS可以方便地定义许多种鼠标形状。用本文...

CSS代码中注释的3种方法

标签： Web开发

1、选择器（child selector）如果你想在IE中隐藏一个CSS定义，可以使用子选择器。 css部分： htmlbody p { /* declarations */ } 2、通配符(*)这种写法只有IE浏览器可以理解（对其他浏览器都隐藏） css部分： * html p { /* declarations */ } 3、反斜线(\)如果你希望IE/Win有效而IE/Mac隐藏，可以使用反斜线技巧。 css部分： /* \*/ * ht...

教你轻松改变iPhone按钮形状