简明现代魔法 -> CSS层叠样式表 -> CSS 鼠标样式

CSS 鼠标样式

2010-03-31

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

cursor的属性:

看到这,可能有的朋友要问了,一般来说手型不是用'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 = '<input name="pg" type="submit" class="sbutton" value="' + j + '" onClick="viewpage(' + j + ')" />';
	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;   
}  
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们