如何在没有mousemove事件(jQuery)的情况下触发mousedown上的自定义光标更改

时间:2012-04-06 05:06:13

标签: jquery css html5 cursor

尝试更改光标

我正在尝试制作一个可拖动的可滚动图像,因此当变量设置为缩放模式时,我试图将光标更改为图像,这样我就可以获得良好的可用性。我发现只有点击“.page”后光标才会改变,然后移动鼠标不仅仅是因为我点击它应该的页面。以下是一些示例代码:

$(".page").on("mousedown", function (evt) {
    if(model.zoomMode){
        $('.page').css('cursor','url("img/hand_closed.gif"),auto');
    }       
}).on("mouseup", function (evt) {
    if(model.zoomMode){
        $('.page').css('cursor','url("img/hand_open.gif"),auto');
    }
});

另一种依赖CSS的方法

当我使用类来实现相同的效果时,似乎会发生这种情况。即。缩放模式在.page对象之外添加一个类,然后javascript为:

$(".page").on("mousedown", function (evt) {
    $('.page').addClass('mouseDown');
}).on("mouseup", function (evt) {
    $('.page').removeClass('mouseDown');
});

然后在CSS中:

.zoom .page:hover{
    cursor:url(../img/hand_open.gif),auto;
}

.zoom .page.mouseDown:hover{
    cursor:url(../img/hand_closed.gif),auto;
}

我正在使用chrome 18进行测试。任何人都知道在没有移动鼠标的情况下触发CSS光标的方法吗?

1 个答案:

答案 0 :(得分:1)

简短回答:不。

答案很长:不,抱歉。

source