用图片替代cursor光标样式

鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url(‘xxx.cur‘,auto;),可是老是不生效,不知什么原因。那怎么办呢?还有一种办法,就是用图片替代鼠标光标,下面就介绍如何使用之。

1.制作光标图片(ps等工具),注意不要用白底,用透明底,透明底一般为gif或者png格式图片。

图1 我做的箭头图片32*32px

2.用一个span标签包含图片

<span id="cursorLRArrow" style="display:none;position:absolute;z-index:9998;width:32px;height:32px;background-image:url(‘left_right_arrow_32.gif‘);cursor:none;pointer-events:none"></span>

样式属性解释

display:none 初始不显示

position:absolute 绝对定位,以left,top控制位置,相对含有(position:relative/absolute)这样定位的父元素的位置,如果找不到这样的父元素,相对于body

z-index:9998 层高度,越高越不会被遮挡,最高为2147483647

width,height 设置和图片一样的宽高

background-image设置图片

cursor:none 鼠标光标不显示

pointer-events:none 不响应鼠标事件,事件可穿透此层,从而不会影响下层元素对鼠标事件的响应

3.鼠标光标的替换

$(function(){
        $(‘body‘).mousemove(function(e){

           var x = e.pageX; //光标距文档左距
            var y = e.pageY; //光标距文档右距

            $(this).css(‘cursor‘,‘none‘);
           $(‘#cursorLRArrow‘).css({
            display:‘inline-block‘,
            left:(x-15)+‘px‘,
            top:(y-10)+‘px‘
           });
           $(‘#cursorLRArrow‘).show();

        });     });

4.去试试吧!

时间: 2024-10-26 09:57:05

用图片替代cursor光标样式的相关文章

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鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 1 div( cursor:default;} //默认正常鼠标指针 2 div( hand;}和div( cursor:text;} //文本选择效果 3 div( cursor:move;} //移动选择效果 4 div( cursor:pointer;} //手指形状 5 div( cursor:url("

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

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

html鼠标光标样式

1 <span style="cursor:pointer">手形</span> 2 <span style="cursor:crosshair">十字</span> 3 <span style="cursor:text" >文本光标</span> 4 <span style="cursor:wait" >等待</span> 5 &

JQueryUI-拖动(Draggable)-光标样式

定义和用法 当拖拽对象时定位光标.默认情况下,光标是出现在被拖拽对象的中间.使用 cursorAt 选项来指定相对于 draggable 的另一个 位置(指定一个相对于 top.right.bottom.left 的像素值).通过提供一个带有有效的 CSS 光标值的 cursor 选项,来自 定义光标的外观 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h

Button 文字阴影,自定义图片,代码绘制样式,添加音效的方法

1.Button自己在xml文件中绑定监听器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent&qu

HTML光标样式

HTML光标样式 把你的光标放到相应文字上鼠标显示效果   cursor:auto;   自动  cursor:all-scroll;  上下左右任何方向滚动  cursor:crosshair;  十字准心  cursor:pointer;  手  cursor:wait;  等待  cursor:help;  帮助  cursor:no-drop;  无法释放  cursor:text;  文字/编辑  cursor:move;  可移动对象  cursor:vertical-text;  

鼠标放上去,不同的cursor光标类型

<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>cursor_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), [email protected], www.do

CSS使用自定义光标样式-遁地龙卷风

测试环境是chrome浏览器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36 css样式 div { cursor:url('1.jpg'),pointer; } HTML <body> <div style="width:100px;height:100px;background-color:red;">