html 鼠标形状箭头,CSS各种鼠标样式介绍

html 鼠标形状箭头,CSS各种鼠标样式介绍大家否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状,而是十字形,或者是向左的箭头,或者是个问号等等。当你想在网页的不同位置让鼠标显示不同形状,以体现不同的功能区;当你想让你的网站体现与众不同的风格时,考虑一下在鼠标样式上下功夫吧。其实鼠标样式的用途还是极为广泛的,那么怎样才能实现鼠标的不同样式呢?这就要用到css层叠样式表中的cursor属性了。cursor的属性:pointer:手型c…

大家好,又见面了,我是你们的朋友全栈君。

大家否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状,而是十字形,或者是向左的箭头,或者是个问号等等。当你想在网页的不同位置让鼠标显示不 同形状,以体现不同的功能区;当你想让你的网站体现与众不同的风格时,考虑一下在鼠标样式上下功夫吧。其实鼠标样式的用途还是极为广泛的,那么怎样才能实 现鼠标的不同样式呢? 这就要用到css层叠样式表中的cursor属性了。

cursor的属性:

pointer:手型

crosshair:十字型

text:平时鼠标移动到文本上的样式

wait:等待的效果

default:默认的那种效果

help:带问号的鼠标样式

e-resize:向右的箭头

ne-resize:向右上方的箭头

n-resize:向上的箭头

nw-resize:向左上方的箭头

w-resize:向左的箭关

sw-resize:向左下的箭头

s-resize:向下的箭头

se-resize:向右下方的箭头

auto:系统自动的效果

看到这,可能有的朋友要问了,一般来说手型不是用’hand’来表示吗,不仅通俗易懂而且一些网站是这样介绍的,可以访问以下地址“http://blog.csdn.net/overmind/archive/2005/02/04/280616.aspx”, 其实不然,“hand”在css中表示手型已经是很久以前的事了,而且是发生在ie6.0以下浏览器上,其他各大浏览器均不认同。鉴于ie5系列基本无人 问津,我们选择“手型”可以选择“pointer”属性,这样就兼容了市场上99%的浏览器。当然非要兼容ie6以下浏览器,我们可以选择这样的css

hack:{cursor:pointer;cursor:hand;}

讲到这,我想大家应该已经掌握了系统自带的cursor样式,接下来我将为大家重点讲解如何自定义cursor样式并兼容各大浏览器。打开google,输入关键字“鼠标样式”,大家会发现有很多网站都有制作绚丽的鼠标样式,并写好了代码。如网址:“http://5211.91.tc/sb.htm”,“http://www.blog286.com/sina/20070906/0Z610102007.html”,但可悲的是这些鼠标样式只能在ie下生存,在其他主流浏览器如:firefox,opera,sarifi都无法使用。

再比如以下 JavaScript 代码:

function evalPage(j)

{

var div = document.createElement(‘div’);

var html = ?”;

div.innerHTML = html;

div.style.cursor = ‘pointer’;

div.style.marginBottom = ‘7px’;

div.style.display = ‘inline’;

return div;

}

就是将鼠标移动到某个 div 上变成手形。

顺便给出 viewpage() 函数的代码

function viewpage(p)

{

if(window.XMLHttpRequest)

{

var xmlReq = new XMLHttpRequest();

}

else if(window.ActiveXObject)

{

var xmlReq = new ActiveXObject(‘Microsoft.XMLHTTP’);

}

var formData = “pg=”+p;

xmlReq.onreadystatechange = function()

{

if(xmlReq.readyState == 4)

{

//alert(xmlReq.responseText);

//document.getElementById(‘content2’).innerHTML = xmlReq.responseText;

runXML(xmlReq.responseText);

}

}

xmlReq.open(“post”, “genxml.php”, true);

xmlReq.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

xmlReq.send(formData);

return false;

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140783.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • navicate15激活码【在线破解激活】

    navicate15激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • java发送邮件-模板

    java发送邮件-模板今天写完了一个关于使用模板发送邮件的代码,作为例子保存着,希望以后用得着,也希望能够帮助到需要帮助的人以163网易邮箱为例,使用java发送邮件,发送以邮件时使用模板(.ftl文件转换为html)发送邮件内容,并附带上附件,可抄送给多个人。项目的结构目录如下邮箱配置文件mail.properties参数如下#mailsendersettings#forexample:smtp.1

  • 计算机一志愿保护,如何判断学校是否保护一志愿!?那些保护一志愿的学校都……

    计算机一志愿保护,如何判断学校是否保护一志愿!?那些保护一志愿的学校都……保护第一志愿,顾名思义就是保护以第一志愿报考该校的学生,即一志愿学生相对于调剂考生优先录取。不保护第一志愿的院校,是指这些调剂生和一志愿报考本专业的学生一起复试,再统一排名,统一录取。但由于每年自划线的高校基本上先于其他院校复试,导致考研调剂时,可能有一批本科是211/985的考生考研失利,选择调剂到那些有名额的211院校或者普通一本院校,有些接受调剂的学校更倾向于接收211/985院校的调剂生,…

  • BigDecimal 保留小数位/保留两位小数「建议收藏」

    BigDecimal 保留小数位/保留两位小数「建议收藏」BigDecimaldecimal=newBigDecimal(“1.98764432”);System.out.println(decimal);BigDecimalsetScale=decimal.setScale(4,BigDecimal.ROUND_HALF_DOWN);System.out.println(setScale);BigDecimalsetScale1=decimal.setScale(4,BigDecimal.ROUND_HALF_UP.

  • 洛谷p2669_洛谷首页

    洛谷p2669_洛谷首页洛谷 2577 [ZJOI2005]午餐——序列dp

  • java加壳工具_加壳工具 – virbox加密空间站 – OSCHINA – 中文开源技术交流社区

    java加壳工具_加壳工具 – virbox加密空间站 – OSCHINA – 中文开源技术交流社区VirboxProtectorStandalone加壳工具可直接对dll文件进行加壳,防止代码反编译,更安全,更方便。产品简介VirboxProtectorStandalone提供了强大的代码虚拟化、高级混淆与智能压缩技术,保护您的程序免受逆向工程和非法修改。VirboxProtectorStandalone将被保护的程序代码转换为虚拟机代码,程序运行时,虚拟机将模拟程序执行,进入…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号