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

What is the Javascript for changing the css on an element?

本文关键字：css Javascript 元素 用于 什么      更新时间：2023-09-26

我有一个 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;
}

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

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


阅读本文：
http://www.sitepoint.com/css3-cursor-styles/


也许你在'.column .dragbox h2.grabbing'

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

问题不在于你的JavaScript。

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

"抓取"样式在我的<h2>元素中添加和删除。

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

问题是，光标不会更改。

这让我觉得有两件事之一是正确的：

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

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

我的猜测是某些光标仅在某些浏览器的某些位置工作......

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

  • 当用户将鼠标悬停在链接上时，在 Chrome 中更改光标样式

    • 失败

  • http://www.quirksmode.org/css/cursor.html

  • http://code.google.com/p/chromium/issues/detail?id=26723

相关文章：