javascript - ie - css - 动态更新鼠标指针形状

最近写了一个图片展示的页面,在弹出层中显示大图,在大图的左边和右边点击时可以翻页。

将鼠标在大图上移动时,移动到左边显示一个向左的箭头,移动到右边时显示一个向右的箭头。

当第一次显示大图时,如果鼠标位置在大图上,初始化显示一个向左或向右的箭头。

关于鼠标在大图上移动,动态的更新鼠标指针,这个没什么问题,使用 img.onmousemove = function(){img.className=...}就可以搞定。

我遇到的问题是在IE浏览器上第一次显示大图的时候,初始化鼠标指针形状,下面是一个样式表(css):


1

2

.cursor_left {cursorurl(/images/left.cur), pointer}

.cursor_right {cursorurl(/images/right.cur), pointer}

我在 img.onload 事件中来初始化鼠标指针形状, 直接设置 img.className = "...", 在chrome,firefox浏览器上能正常的显示自定义的鼠标指针形状。但在 ie(6,8)浏览器上无法显示出箭头。

经过几个小时的不断测试,最后发现有ie上,使用 img.style.cursor = "url(....)"; 有效果。

好吧,javascript的代码,针对ie浏览器:


1

2

3

4

5

img.style.cursor = "url(/images/left.cur)";

img.className = "cursor_left";

 //如果同时指定的了 img.style.cursor 和 img.className, img.style.cursor 的优化级高于 img.className, 所以这里必须加上这么一句

img.style.cursor = "";

这里需要注意,最后加上一句: img.style.cursor = ""; 不然,在后继的 img.onmousemove 事件中设置 img.className 会无效。我猜测是优先级问题。

2014-05-30

时间: 2024-10-08 04:00:17

javascript - ie - css - 动态更新鼠标指针形状的相关文章

CSS如何规定鼠标指针的形状

CSS如何规定鼠标指针的形状: 鼠标指针在不同元素黄总的形状,往往能够说明此元素的功能,通过cursor属性可以设置鼠标指针的形状. 罗列如下: auto:标准光标 default:标准箭头 hand:手形光标 wait:等待光标 text:I形光标 vertical-text:水平I形光标 no-drop:不可拖动光标 not-allowed:无效光标 help:?帮助光标 all-scroll:三角方向标 move:移动标 crosshair:十字标 原文地址是:http://www.51t

CSS改网页鼠标指针、改指定元素指针(1)——代码部分

要实现CSS改网页鼠标指针.改指定元素指针,我们应该首先了解以下内容: 所有主流浏览器都支持 cursor 属性. 注释:Opera 9.3 和 Safari 3 不支持 url 值. 注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 默认值: aut

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被

【css】cursor鼠标指针光标样式知识整理

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 1 div( cursor:default;} //默认正常鼠标指针 2 div( hand;}和div( cursor:text;} //文本选择效果 3 div( cursor:move;} //移动选择效果 4 div( cursor:pointer;} //手指形状 5 div( cursor:url("

使用C#改变鼠标的指针形状

1.在一个无标题的窗体中用MOUSEMOVE事件判断鼠标坐标是否到达窗体的边缘,如果是的话将鼠标指针改为可调整窗体大小的双向箭头. private   void   Form1_MouseMove(object sender,   System.Windows.Forms.MouseEventArgs e)    {    if(0   ==   e.X)    {        this.Cursor   =   Cursors.SizeWE;    }       //改成这样就可以了,很奇

【javascript/css】关于鼠标事件onmousexxx和css伪类hover

在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover". 在实际运用中如何选择,取决于清楚明白的了解他们之间的区别. HTML DOM 允许 JavaScript 对 HTML 事件作出反应. 在我们为元素绑定了一个事件,当事件发生的时候,可以执行一段javascript代码. 关于鼠标事件,总共有: onmouseover和onmouseout 鼠

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

CSS样式:cursor -----定义鼠标指针

定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 可能的值: demo: <html> <head>     <style type="text/css">        span{               line-height: 30px;             }     </style>  <

CSS+元素,鼠标事件触发鼠标模形变成手状的形状

|| 版权声明:本文为博主原创笔记,未经博主允许不得转载. CSS+元素,鼠标事件触发鼠标模形变成手状的形状,以及其他样式. 方案一:使用CSS样式改变,鼠标移动到元素上显示手状. 1 cursor:pointer; 方案二:使用JS触发事件改变原样式:鼠标事件onmouseover(鼠标移动到元素上触发事件)触发时设置样式 1 // 使用在元素的标签上的事件 2 // 第一种方式 3 onmouseover="this.style.cursor='mouseHand'" 4 5 //