CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击

鼠标经过变小手

div {cursor:pointer; // 直接给需要改变指针样式的对象添加该属性，不要被误导为 :hover 伪类
}

cursor属性及属性值介绍

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标经过的各种样例</title></head><body><p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p><!-- 请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标 --><span style="cursor:url(/图片路径);cursor:default">自定义指针url</span><br><span style="cursor:auto">默认。浏览器设置的光标</span><br><span style="cursor:crosshair">光标呈现为十字线</span><br><span style="cursor:default">默认光标（通常是一个箭头）</span><br><span style="cursor:e-resize">此光标指示矩形框的边缘可被向右（东）移动</span><br><span style="cursor:help">此光标指示可用的帮助（通常是一个问号或一个气球）</span><br><span style="cursor:move">此光标指示某对象可被移动</span><br><span style="cursor:n-resize">此光标指示矩形框的边缘可被向上（北）移动</span><br><span style="cursor:ne-resize">此光标指示矩形框的边缘可被向上及向右移动（北/东）</span><br><span style="cursor:nw-resize">此光标指示矩形框的边缘可被向上及向左移动（北/西）</span><br><span style="cursor:pointer">光标呈现为指示链接的指针（一只手）</span><br><span style="cursor:progress">指正携带沙漏</span><br><span style="cursor:s-resize">此光标指示矩形框的边缘可被向下移动（南）</span><br><span style="cursor:se-resize">此光标指示矩形框的边缘可被向下及向右移动（南/东）</span><br><span style="cursor:sw-resize">此光标指示矩形框的边缘可被向下及向左移动（南/西）</span><br><span style="cursor:text">此光标指示文本</span><br><span style="cursor:w-resize">此光标指示矩形框的边缘可被向左移动（西）</span><br><span style="cursor:wait">此光标指示程序正忙（通常是一只表或沙漏）</span><br></body>
</html>

CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击相关推荐

DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
【CSS】滚动条样式详解
[只总结webkit的,IE与firefox暂不做记录] 呼出与关闭滚动条 1.如果是浏览器的滚动条,其依赖的是html标签,我们不需要设置,内容溢出会自动出现 /*对html标签的溢出样式隐藏即可* ...
html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类在CSS中,我们可以使用& ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
用css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...
html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
CSS便签样式效果，鼠标移动到指定便签显示隐藏内容
css便签样式效果,鼠标移动到指定便签显示隐藏内容这是效果图欢迎大家一起交流学习这里放了源码 <!DOCTYPE html> <html lang="zh"& ...

CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击

鼠标经过变小手

CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击相关推荐

最新文章

热门文章