javascript - 用于更改元素上的 css 的 Javascript 是什么？

Question

我有一个无法运行的 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;
}

Answer 1

它可能不适用于文本元素。尝试按钮(但显然你必须开始拖动才能使其工作):

你可以只用 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');
});