更改元素上css的Javascript是什么？

我有一个JSFIDLE示例无法使用：

我希望该元素在鼠标悬停时有一只张开的手（可以使用），在鼠标点击时有一只闭合的手（我无法使用）

我知道我在javascript中做错了什么。有人能帮忙吗

Javascript:

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

CSS:

阅读本文：



也许你错过了一些“，”at“。column.dragbox h2.抓取“

---

只有webkit浏览器支持抓取手。但是当我尝试以类似的方式使用它时，我注意到我不能在抓取时创建一个闭合的指针，因为浏览器会覆盖它。

问题不在于JavaScript

如果我完全复制您的代码并创建自己的测试页面，它就会工作

样式“抓取”是从我的

元素中添加和删除的

我可以看到FireBug中添加和删除的样式

问题是，光标不会改变

这让我觉得有两件事是真的：

你的css不正确

这些光标样式不能应用于

元素（或者当鼠标悬停在文本上时不能应用）

尝试打开调试器，您可能会看到同样的情况

我的猜测是某些游标只在某些浏览器的某些位置工作

也许你会在这些文章中找到一些东西来解释你所看到的：

---

它可能不适用于文本元素。“尝试”按钮（但显然您必须开始拖动以使其工作）：

您只需使用html/css就可以做到这一点

此处演示：

HTML

或JS

此处演示：（）

HTML

JS

---

首先，您的小提琴不包括jQuery。查看浏览器的JavaScript控制台：

uncaughtreferenceerror:$未定义

所讨论的元素是否为

元素，并应用了以下三个类：

列

抓取

？抱歉，我的意思是删除列。您当前的解决方案将导致

dragbox

classed容器中的所有

标记接收

抓取

类。您可能希望将事件处理程序更改为使用

$（this）.addClass（…）

，etcMatt-不确定您的意思，它告诉我我的javascript是有效的。谢谢，我改了。但仍然不起作用。请不要使用链接作为答案的主要内容。如果那个网站消失了，这个答案的价值就会大大降低。我不确定你在“也许你错过了一些”、“at.column.dragbox h2.grabbing”这句话中的意思。仅供参考，我曾在Firefox、Chrome和IE中尝试过这一点。张开的手可以工作，闭着的手可以工作。不起作用的是在一个鼠标事件中在这两者之间切换。我确实看到在调试器中添加和删除样式。我也尝试过将其添加到dragbox中，但没有成功。不管我是否看完了课文。在CSS块内部，如果我把它放在.dragbox h2 CSS块中，我会看到闭合的手。街区的申报有错吗？是的。dragbox h2。抓取不是方法吗？这很有效。那么，除了按钮，我如何找到它将在哪些元素上工作呢？最好是你不需要拖动的元素，以使闭合的手显示出来。我不是100%确定，但我认为它不会与文本元素一起工作。浏览器强制游标也有问题。例如，当您尝试拖动图像时，它将变为“不允许”。使用按钮你几乎可以用按钮做任何事情。只需覆盖默认样式（边框、背景等），非常感谢。我希望能找到一种方法来找出它还能在哪些其他元素上工作（以及为什么），但谷歌什么也没发现。

.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;
}

<button>Test Grab!</button>

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;
}

<button>Test Grab!</button>

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;
}

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