Question

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

在这里你可以找到一个解释性的图像：

Image to explain the type of cursor I want http://img190.imageshack.us/img190/1786/72162829.png

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

Answer 1

Selection styles（在IE中不受支持）是唯一想到达到预期效果的东西：

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

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

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

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

Answer 2

正如Tzury Bar Yochay所说，你可以通过CSS和JavaScript来做到这一点。

CSS - 使用cursor样式属性，该属性可以是several standard values（首选）或您自己的光标文件中的任何一个（但始终包含后备内容）使用其中一个标准值）。下面是一个示例，将具有“可点击”类的任何元素的光标更改为标准光标，以便您可以单击：

.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小提琴上查看它。 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';

当鼠标使用HTML / Javascript覆盖某些选定文本时更改光标类型

4 个答案: