У меня есть пример JSFiddle, я не могу работать: http://jsfiddle.net/bjacobs/KDVvN/28/

Я хочу, чтобы у элемента была открытая ладонь при наведении (что работает) и закрытая рука при щелчке мышью по нему (что я не могу заставить работать).

Я знаю, что я делаю что-то не так в JavaScript. Кто-нибудь может помочь?

Javascript:

  $(function () {
    $(".dragbox h2").on("mousedown", function (evt) {
        $(this).addClass('grabbing');
    }).on("mouseup", function (evt) {
        $(this).removeClass('grabbing');
    });
  });

CSS:

.dragbox {
    margin:0px 2px 2px;
    background:#fff;
    position:relative;
}
.dragbox h2 {
    font-size:15px;
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.dragbox h2.grabbing {
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
1
bjacobs 29 Янв 2013 в 03:36

3 ответа

Лучший ответ

Может не работать с текстовыми элементами. Попробуйте кнопку (но, очевидно, вы должны начать перетаскивать, чтобы она заработала):

Вы можете сделать это только с помощью html / css

ДЕМО ЗДЕСЬ: http://jsfiddle.net/KDVvN/37/

HTML

<button>Test Grab!</button>

CSS

button {
    font-size:15px;
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button:active {
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

Или JS

ДЕМО ЗДЕСЬ: (http://jsfiddle.net/KDVvN/36/)

HTML

<button>Test Grab!</button>

CSS

button {
    font-size:15px;
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button.grabbing {
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

JS

$("button").on("mousedown", function (evt) {
    $(this).addClass('grabbing');
}).on("mouseup", function (evt) {
    $(this).removeClass('grabbing');
});
1
Webapper 29 Янв 2013 в 00:49


Прочитайте эту статью:
http://www.sitepoint.com/css3-cursor- стили /


Возможно, вы пропустили "," в ".column .dragbox h2.grabbing"

Только браузеры webkit будут поддерживать захват руки. Но когда я попытался использовать это подобным образом, я заметил, что не могу сделать курсор закрытой руки во время захвата, потому что браузер переопределяет его.

1
StiD 28 Янв 2013 в 23:45

Проблема не в вашем JavaScript.

Если я точно копирую ваш код и создаю свою собственную тестовую страницу, это работает.

Стиль " grabbing " добавлен и удален из моего <h2> элемента.

Я вижу, как стиль добавляется и удаляется в FireBug.

Проблема в том, что курсор не меняется.

Это заставляет меня думать, что одна из двух вещей верна:

  1. ваш CSS не правильно
  2. эти стили курсора нельзя применять к элементу <h2> (или их нельзя применять, когда указатель мыши находится над текстом)

Попробуйте открыть отладчик, и вы, вероятно, увидите то же самое.

Я предполагаю, что определенные курсоры работают только в определенных местах в определенных браузерах ...

Возможно, вы найдете в одной из этих статей что-то, что объясняет то, что вы видите:

0
Community 23 Май 2017 в 10:31