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

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

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

}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140783.html原文链接：https://javaforall.cn