CSS控制鼠标形状

巧合要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式。CSS鼠标样式语法如下：
任意标签中插入 style="cursor:*"
例 子：<span style="cursor:*">文本或其它页面元素</span> <a href="#" style="cursor:*">文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种：

下面是对这15种效果的解释。移动鼠标到解释上面，看看你的鼠标起了什么变化吧！
hand是手型
例子：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>

pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。
例子：CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a>

crosshair是十字型
例子：CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a>

help是问号
例子：CSS鼠标问号效果 <a href="#" style="cursor:help">CSS鼠标问号效果</a>

下面写法都一样，这里就不一一写完了。
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果

时间： 2024-10-12 23:55:18

CSS控制鼠标形状的相关文章

js和css控制鼠标略过和点击后的样式

点击链接加入群[JavaEE(SSH+IntelliJIDE+Maven)]:http://jq.qq.com/?_wv=1027&k=L2rbHv 一.js和css控制鼠标略过和点击后的样式 [html] view plaincopy <script language="javascript"> document.onreadystatechange=function()     //当页面状态改变时执行函数 { if(document.readyState ==

CSS声明 列表样式 显示方式 鼠标形状

列表样式 list-style-type list-style-image 显示方式: 默认显示方式 改变显示方式 鼠标形状: 如何改变属性形状 cursor属性 list-style-type: 该属性控制列表中列表项标志的样式 无序列表 有序列表 list-style-image 该属性使用图像替换列表项的标志 取值为:URL(),制定图像有序或无序列表项的标志 列表样式代码: <!doctype html> <html> <head> <title>列

CSS 鼠标形状

css样式中鼠标形状的改变是通过cursor属性来决定的,如下所示: cursor: auto.hand.pointer.crosshair.default.text.vertical-text.wait.move.help.row-resize.col-resize.all-scroll.progress.not-allowed.no-drop. 解释说明hand:手型,通常用户将光标移到超链接上时那样pointer:和hand一样,它的兼容性更好.crosshair:十字型default:

鼠标形状css样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标形状css样式</title> </head> <body> <div><a href="javascript:void(0);" title="cursor:hand"

jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 （css控制span标签）

<script> $(function(){ var text ; $(".pos span").each(function(){ text = $(this).text().trim(); if(text=="设为默认"){ $(this).css('display','none'); } }); $(".pos").mouseover(function(){ //鼠标移进显示效果 text = $(this).find('span

DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )  取值: auto  :   默认值.浏览器根

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

CSS控制列表样式属性list-style有哪些？怎么用？

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

html学习之CSS控制宽高背景

该笔记为自学html设计笔记,所有知识点为自己整理,如有疑问请浏览十八哥php教程,教程链接,点击这里. 知识梳理:1.html中的<head>和<body>分别为文本网页的头部和主体部分,其中head主要是定义html的类型和属性,比如title是标题部分,meta是机器搜索时的索引:body是html呈现的主体部分,是浏览网页可以看到得那一部分. 2.CSS 的引入方式 ①外部链接一个CSS文件,我们在HTML头部分标明:<link href="css/my.c