1

我有一个无法工作的 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;
}
4

3 回答 3

1


阅读这篇文章：
http


://www.sitepoint.com/css3-cursor-styles/也许你错过了一些“，”在'.column .dragbox h2.grabbing'

只有webkit 浏览器将支持抓取手。但是当我尝试以类似的方式使用它时，我注意到在抓取时我无法制作闭合的手形光标，因为浏览器会覆盖它。

于 2013-01-28T23:45:56.540 回答
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');
});
于 2013-01-29T00:43:37.630 回答
0

问题不在于您的 JavaScript。

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

从我的元素中添加和删除样式“ grabbing ”。<h2>

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

问题是，光标没有改变。

这让我认为两件事之一是正确的：

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

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

我的猜测是某些游标只在某些浏览器的某些地方工作......

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

于 2013-01-29T00:24:31.067 回答