Question

我有一个JSFiddle示例我无法工作： http://jsfiddle.net/bjacobs/KDVvN/28/

我希望元素在moused over（有效）时有一个张开的手，当单击鼠标时它是一个闭合的手（我无法工作）。

我知道我在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

阅读这篇文章：
http://www.sitepoint.com/css3-cursor-styles/

你可能错过了一些“，”在'.column .dragbox h2.grabbing'

只有webkit浏览器才支持抓手。但当我尝试以类似的方式使用它时，我注意到我抓住时不能制作一个关闭的手形光标，因为浏览器会覆盖它。

Answer 2

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

您只需使用html / css

即可

DEMO HERE：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

DEMO HERE :( 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');
});

Answer 3

问题不在于您的JavaScript。

如果我准确地复制你的代码并创建我自己的测试页面，那就可以了。

我的<h2>元素中添加了“抓取”样式。

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

问题是，光标不会改变。

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

你的CSS不正确
这些光标样式无法应用于<h2>元素（或当鼠标悬停在文本上时无法应用它们）

尝试打开一个调试器，你可能会看到同样的事情。

我的猜测是某些游标只能在某些浏览器的某些地方使用...

也许你会在其中一篇文章中找到解释你所看到的内容的东西：

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

3 个答案: