javascript - 当鼠标移过使用 HTML/Javascript 的某些选定文本时更改光标类型

Question

当鼠标移到选定的文本上时，我需要更改光标类型。

在这里您可以找到解释性图像：

图片解释我想要的光标类型 http://img190.imageshack.us/img190/1786/72162829.png

在此示例中，用户必须将一些文本拖到文本区域。由于传统指针不直观，我想使用“移动”指针（光标：指针）。我用 Photoshop 制作了这张图片。有谁知道如何在 HTML / CSS / JAVASCRIPT 中实现它？

Answer 1

选择样式（在 IE 中不支持）是唯一能达到预期效果的东西：

::selection {
    color: red;
    cursor: move;   
}

::-moz-selection {
    color: red;
    cursor: move;
}

...但是，尽管文本变为红色（这只是一个控件），但光标在 Safari 或 Firefox 中似乎都没有改变。但是，如果您将文本包装在 HTML 元素中，并将样式应用于元素（通过 ID 或类），则一切正常。

您可以通过使用 JavaScript 的window.getSelection()方法将所选文本包装在 DOM 元素中，然后设置此 DOM 元素的样式来解决此问题。不过，我不确定这是否可行（而且可能有点老套）。

Answer 2

正如 Tzury Bar Yochay 所指出的，您可以通过 CSS 和 JavaScript 做到这一点。

CSS - 使用cursor样式属性，它可以是几个标准值中的任何一个（首选）或您自己的光标文件（但始终包含使用标准值之一的后备）。这是一个示例，将具有“可点击”类的任何元素的光标更改为您可以点击的标准光标：

.clickable {
  cursor: pointer;
}

（这应该出现在您的样式表文件中，或者在文档的style元素中head[如果由于某种原因您不能使用单独的文件]。）然后您可以将该类应用于相关元素。

JavaScript -style元素上的属性公开 CSS 样式，因此您可以这样做：

var element = document.getElementById('someid');
element.style.cursor = 'pointer';

...虽然我通常更喜欢通过元素的className属性添加/删除类名来做到这一点（这是一个以空格分隔的元素类列表）：

var element = document.getElementById('someid');
element.className += " clickable";

Answer 3

这是一个非常简单的示例，您可以在 js fiddle 上查看它。 http://jsfiddle.net/umairb3/hbhvumn3/1/

p.normal::selection {
    background:#cc0000;
    color:#fff;
}

p.moz::-moz-selection {
    background:#cc0000;
    color:#fff;
}

<p class="normal moz">Hello world</p>
<p>Hello world</p>

Answer 4

CSS

<style type="text/css">
    body{
    cursor: url(mycursor.cur)
}
</style>

JavaScript

document.body.style.cursor = 'wait';