巧用CSS控制鼠标样式变换

css|控制|鼠标样式

主页上的鼠标是不是就只有箭头和小手两种模样呢?如果鼠标移到“帮助”等字样上时,形状就变成求助的问号;鼠标移到可能需要较长时间等待的超链接时,鼠标形状就变成等待的样子……那该多好啊!
  其实,借助我们的css,几句很简单的代码就可以实现这一切!

  不信?把鼠标移到下面的演示文字上看看效果吧!

  演示:手形

  源代码:<P style="CURSOR: hand">演示:手形</P>

  演示:移动

  源代码:<p style=cursor:move>演示:移动</p>

  演示:等待

  源代码:<P style="CURSOR: wait">等待状态</P>

  演示:定位指示

  源代码:<P style="CURSOR: crosshair">演示:定位指示</P>

  演示:帮助

  源代码:<P style="CURSOR: help">演示:帮助<P>

  是不是简单又方便?这里我们只用到了CSS中的“cursor”属性,利用“style=cursor:值”这样的语句形式,分别设置具体的值就可以了。例如:值为“hand”时,当鼠标移到相应的文字或图片上时,就会变成超链接的小手形;值为“move”时,当鼠标移到相应的文字或图片上时,就会变成上下左右带方向箭头的形状,依此类推。这个小技巧也许可以在你制作主页时帮上一点忙呢!

时间: 2024-09-18 23:07:17

巧用CSS控制鼠标样式变换的相关文章

用CSS改变鼠标样式

  用CSS改变鼠标样式   关键字: 解释: 样式:   auto 自动改变样式   crosshair 精确定位"+" 用鼠标指着我察看效果   default 默认指针 用鼠标指着我察看效果   hand 手形 用鼠标指着我察看效果   move 移动 用鼠标指着我察看效果   e-resize 箭头朝右方 用鼠标指着我察看效果   ne-resize 箭头朝右上方 用鼠标指着我察看效果   nw-resize 箭头朝左上方 用鼠标指着我察看效果   n-resize 箭头朝上方

网站制作如何用CSS控制超链接样式

  网站制作用CSS可控制超链接样式,一般分为四个部分:a:active是超级链接的初始状态:a:hover是把鼠标放上去时的状况:a:link 是鼠标点击时:a:visited是访问过后的情况. CSS控制超链接的三种方法 1.通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码<div class="yangshi"><a href="http://www.wangqi.com/">CSS</a>&l

CSS控制页面样式的4种方式和优先级问题

本节主要讲解,两个内容, 第一:CSS如何控制页面样式,有几种方式: 第二:这些方式出现在同一个页面时的优先级. 使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表 象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点:不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现

css 控制鼠标显示样式示例

鼠标的显示样式可以在css里进行友好的控制,下面整理了一些鼠标的样式类型,感兴趣的朋友可以参考下,希望对大家学习css有所帮助     复制代码 代码如下: <span style="cursor:*">文本</span> 然后*换成下面的一种就行: hand 手型 crosshair 十字型 text 移动到文本上的那种效果 wait 等待的那种效果 default 默认效果 help 问号 e-size 向右的箭头 ne-resize 向右上的箭头 n-re

手把手教你的jquery+CSS控制打印样式实例

一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />   用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media=&q

关于css控制鼠标滑过时的效果

问题描述 <tdonMouseOver="this.style.background='#ff6600'"onMouseOut="this.style.background='#CCCCCC';"bgcolor="#CCCCCC"></td> 上面的代码是鼠标滑过时候表格背景色变化,离开的时候会恢复默认的背景色.我现在有个问题,就是上面这段代码.因为我的背景是图片.所以上面关于背景色的地方我该如何改成图片的形式呢.back

用CSS控制滚动条样式

用CSS样式表控制鼠标显示的样式

css|控制|鼠标|显示|样式表 一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型.但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型. 用css控制的语法如下: <span style="cursor:*">文本或其它页面元素</span> 把 * 换成如下15个效果的一种: hand.crosshair.text.wait.default.help.e-resize.ne-resize.n-resize.

精通CSS+DIV网页样式与布局--页面和浏览器元素

        在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动条.首先我们来看一张思维导图:                  接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:          动态超链接 <span style="font-size:18p