Как заставить курсор мыши сделать захват мыши вниз?

Я сделал демо на JSFIDDLE
обновление эта версия работает в FF, но не chrome..
обновление 2 этой сайт кажется, есть рабочее решение.

мой Javascript выглядит следующим образом

$("#click").live({
  mousedown: function() {
            this.addClass("closed");
        },
  mouseup: function() {
            this.removeClass("closed");
        }
});

и CSS выглядит следующим образом 

.closed {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

но почему курсор не становится закрытой рукой на мыши с этим кодом jQuery? Большое вам спасибо! Любая помощь будет ценю!

8
css cursor jquery mouse

8 ответов

обновление 2016:

необходимо сделать это в плагине слайдера jQuery, над которым я работаю. Я определил курсоры в CSS, а затем добавил/удалил их в событиях touch/mouse с помощью jQuery.

css:

.element:hover{
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.element.grabbing { 
    cursor: grabbing; 
    cursor: -webkit-grabbing;
}

JS:

$(".element").on("mousedown touchstart", function(e) {
    $(this).addClass('grabbing')
})

$(".element").on("mouseup touchend", function(e) {
    $(this).removeClass('grabbing')
})
3

вы можете получить захват курсора мыши только с помощью CSS:

/* Standard cursors */    
.element { cursor: grab; }
.element:active { cursor: grabbing; }

/* Custom cursors */
.element { cursor: url('open-hand.png'), auto; }
.element:active { cursor: url('closed-hand.png'), auto; }
4

это работает (по крайней мере, в FF):http://jsfiddle.net/uZ377/21/

Я изменил live на bind, не знаю почему, но live не работал. Кроме того, я завернул this в функции jQuery.

1

Я разделил эти два события.

http://jsfiddle.net/genesis/uZ377/23/

однако, похоже, он не работает в Chrome, но он работает в Firefox.

1
$(document).ready(function() {
  $(".surface").mouseup(function(){
        $(".surface").css( "cursor","crosshair");
      }).mousedown(function(){
        $(".surface").css( "cursor","wait");
      });
});

сделать в css .surface{cursor:crosshair;} Если вы хотите, чтобы мышь вниз / вверх, просто измените курсоры, чтобы передать значок вверх/вниз. Надеюсь, это поможет.

1

синтаксис, который вы используете, не был введен до 1.4.3 (документы), ваш jsFiddle использует 1.4.2. Ваш jsFiddle также добавляет класс this, а не $(this).

но я также не уверен в том, как CSS курсора реагирует на mousedown и mouseup - у меня есть ощущение, что это может быть ограничение в некоторых браузерах, немного возиться с ним работает на mouseup, но не mousedown - что кажется странным.

0

на самом деле похоже, что есть проблема с живым методом привязки событий mousedown и mouseup. Разделяя два элемента, кажется, что он работает нормально.

в любом случае часть URL свойства cursor не поддерживается во всех браузерах. Проверьте с Chrome и Firefox, например, он работает нормально для меня, но не в Opera, так как, насколько я знаю, не поддерживает его.

0

начал работать в Safari после добавления события.метод preventDefault() http://jsfiddle.net/uZ377/49/

0