javascript - ie - css - 动态更新鼠标指针形状
最近写了一个图片展示的页面,在弹出层中显示大图,在大图的左边和右边点击时可以翻页。
将鼠标在大图上移动时,移动到左边显示一个向左的箭头,移动到右边时显示一个向右的箭头。
当第一次显示大图时,如果鼠标位置在大图上,初始化显示一个向左或向右的箭头。
关于鼠标在大图上移动,动态的更新鼠标指针,这个没什么问题,使用 img.onmousemove = function(){img.className=...}就可以搞定。
我遇到的问题是在IE浏览器上第一次显示大图的时候,初始化鼠标指针形状,下面是一个样式表(css):
1
2
|
.cursor_left { cursor : url (/images/ left .cur), pointer } .cursor_right { cursor : url (/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
javascript - ie - css - 动态更新鼠标指针形状的更多相关文章
- CSS/HTML 改变鼠标指针形状
改变鼠标指针形状的方法有两种:第一种:用的来改变鼠标指针形状.另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状 我们先来看第一种:用来改变鼠标指针形状. 有些 ...
- C#软件开发实例.私人订制自己的屏幕截图工具(十)在截图中包括鼠标指针形状
本实例所有文章文件夹 (一)功能概览 (二)创建项目.注冊热键.显示截图主窗体 (三)托盘图标及菜单的实现 (四)基本截图功能实现 (五)针对拖拽时闪烁卡顿现象的优化 (六)加入配置管理功能 (七)加 ...
- cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
1 1 cursor CSS属性定义鼠标指针悬浮在元素上时的外观. https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor 概述 cursor ...
- 【css】cursor鼠标指针光标样式知识整理
在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...
- css常用鼠标指针形状代码
默认 default 文字/编辑 text 自动 auto 手形 pointer, hand(hand是IE专有) 可移动对象 move 不允许 not-allowed 无法释放 no-drop 等待 ...
- 使用C#改变鼠标的指针形状
1.在一个无标题的窗体中用MOUSEMOVE事件判断鼠标坐标是否到达窗体的边缘,如果是的话将鼠标指针改为可调整窗体大小的双向箭头. private void Form1_MouseMove(o ...
- 【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...
- JQuery Mobile - 解决动态更新页面内容,CSS失效问题!
今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果 ...
- 鼠标指针光标样式css cursor default pointer hand url
一.cursor语法与结构 1.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w- ...
随机推荐
- Centos下安装破解Jira7的操作记录
Jira是一个集项目计划.任务分配.需求管理.错误跟踪于一体的工具,可以作为一个bug管理系统,可以将在测试过程中所发现的bug录入.分配给开发人员.前面介绍了Confluence在Centos下的安 ...
- 《linux内核设计与分析》内核模块编程
内核模块编程 一.准备工作 虚拟机:VMware Workstation 12操作系统:ubuntu当前内核版本:linux-headers-4.4.0-22-generic 二.有关于内核模块的知识 ...
- 【Alpha阶段】测试报告
buglist:链接 1.测试找出的BUG 从上线之前黑盒测试结果bug清单: 录入报告的按钮变灰 浏览器浏览时网站崩溃 实验报告显示不出 收藏夹在点击多次后变为 1071生成报告数据不对 个人收藏点 ...
- [转载]Linux目录说明
原作者博客: http://blog.51cto.com/yangrong/1288072 将文字部分转移到自己的目录下便于学习记录 感谢~ 2./目录 目录 描述 / 第一层次结构的根.整个文件系统 ...
- Jquery Ajax xml版Get请求PHP
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- Spring学习14-源码下载地址
今天想下载一下Spring的源代码,登录到Spring官网,傻眼了,根本找不到下载的地方!费了九牛二虎之力在网上找到了一个下载地址,记下来,免得下次再次傻找. http://s3.amazonaws. ...
- 关于Spring MVC跨域
1.Sping MVC 3.X跨域 关于跨域问题,主要用的比较多的是cros跨域. 详细介绍请看https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Ac ...
- 可视化数据matplotlib之安装与简单折线图
matplotlib是一个可视化数据的模块,安装前需要先安装Visual Studio Community:然后去https://pypi.python.org/pypi上查找matplotlib并下 ...
- 洛谷 P4294 [WC2008]游览计划
题目链接 不是很会呢,但似乎抄了题解后有点明白了 sol:状态DP显然,其实是要构建一棵最小生成树一样的东西,我自己的理解(可能不是很对哦希望多多指教)f[x][y][zt]就是到x,y这个点,状态为 ...
- FileStream文件流
操作字节 文件流和文件的区别 文件不管大小,一次读写 文件流可以分块读写 //文件流的资源GC不会释放,所以需要使用using using (FileStream fsRead = new FileS ...