爱子日志

更改网页鼠标指针

在CSS中加入如下代码:



body{cursor:url('鼠标指针图片网址');}

A{cursor:url('鼠标指针图片网址');}



语法上倒是没有什么问题,但是经过多次测试后,发现在不少情况下(尤其是添加了一些别的特效后)

可能会出现IE浏览器崩溃的情况,具体表现就是浏览器的地址栏上下有一片范围会变成黑色,网页背景也可能出现黑色的线条。

仔细分析发现这个A在CSS里总揽太多,其中CSS的三个伪类a:link、a:visited、a:hover都属于A,结果就发生了鼠标指针加载的冲突,从而造成浏览器的崩溃。

经过修改,我认为在CSS中比较正确的统一更改网页鼠标指针的方法是:



body{cursor:url('鼠标指针一的图片网址');}

a:hover{cursor:url('鼠标指针二的图片网址');}



当然,如果你的链接比较多的话,a:hover的鼠标指针图片加载起来可能会比较慢。

你也许追求更灵活的鼠标指针更改方式,那么我们还是用 body{cursor:url('鼠标指针的图片网址');} 来加载默认情况下的鼠标指针图片,而当鼠标指针指向某一范围(某一模块内)时则变成另外一个鼠标指针(图片)。换句话说,鼠标移动到不同范围内可以变成不同的鼠标指针样式。具体的做法就是我们在各个模块CSS里对应的标识符内加入 {cursor:url('鼠标指针的图片网址');} ,比如div#header是头部这个模块的标识符,我们就可以加入:


div#header{cursor:url('鼠标指针的图片网址');}


其它的模块也是类似的加法。

另外我们也可以通过在HTML状态下通过发表文章(代码)来实现更灵活的鼠标指针改变,比如: