如何更改可编辑 div 中元素的光标样式答案

【问题标题】：How to change cursor style for elements in editable div如何更改可编辑 div 中元素的光标样式
【发布时间】：2012-02-08 16:02:36
【问题描述】：

我正在尝试将光标更改为内容可编辑 div 中特定元素的“指针”。

以下 html 代码在 Internet Explorer 8 和 9 中无法正常工作。
任何想法如何为可编辑 div 中的元素设置光标样式？

<div contenteditable="true">
    <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" style="cursor:pointer"/>
</div>

【问题讨论】：

为什么<div> 是<html> 的直接子代？
不要认为这是问题所在。还是编辑了。
显然，这不是问题所在。但是这样做很奇怪。

标签： html contenteditable mouse-cursor

【解决方案1】：

下面是一个示例，说明如何更改 contenteditable div 的光标（更改为类似于 ꕯ 的鼠标/文本插入符号，表示可以进行文本编辑和选择）。
div 还包含继承此设置的子 a 链接元素，因此需要明确设置为标准 cursor。
（该示例包含指向 MDN 文档的链接。）

#edit {
  width:25em;height:4em;
  background-color:#eee;
  border-radius:3px;
  padding:0.2em;
  margin:0.5em;
  
  resize: both;
  overflow: auto;
  
  cursor:text;
  }

#edit a {
  cursor:pointer;
}

<div id="edit" contenteditable>
Hi, my name is <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code>div</code></a> and I'm <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a>.<br/>
My <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor"><code>cursor</code></a> style is set to <code>text</code>.<br/>
I'm also <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize"><code>resizable</code></a> and I <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow"><code>scroll</code></a>!<br/>
So I'm almost like a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"><code>textarea</code></a>.
</div>

【讨论】：

【解决方案2】：

对于inner in div[contenteditable=true] 改变光标的特定元素，你需要改变你的div元素样式。例如

** 我想更改图像的光标。您只需要指定 cursor:pointer |汽车 | text; 在您的元素样式中。

碰巧我们使用了不同类型的选择器。

  div[contenteditable=true]>img {
      cursor:pointer;
    }


div > img 
{
    cursor:wait;
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stackoverflow</title>
 </head>
<body>
 <div contenteditable="true">
    <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" />
</div>
  <div>
  <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" />
  </div>
    </body>
</html>

【讨论】：

【解决方案3】：

          http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

               http://www.marcato.org/luke/web/cursors.html
         http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_cursor

更改鼠标指针

加载此页面时，鼠标指针应变为“手”。自定义光标由“cursor:”样式属性 CSS（级联样式表）定义。更改光标类型的最简单方法是在 HTML 标记中添加 style="cursor: crosshair" 属性。例如

文本

以下链接应在“鼠标悬停”后更改指针。这些显示了您可以使用的许多内置光标样式：

自动

十字准线

默认

指针

帮助

移动

文字

等待

nw-调整大小

n-调整大小

重新调整大小

w-调整大小

手

电子调整大小

sw-调整大小

s-调整大小

自动调整大小

某些光标样式可能不起作用，具体取决于浏览器。自定义鼠标指针

以下 HTML 代码将显示自定义光标：

文本

自定义 URI

用户代理（即浏览器）必须能够处理光标的类型。一些可能有效的文件类型是 .cur、.csr 和 .ani 文件。上面的示例适用于 Windows 的 Internet Explorer，但不适用于 Unix 的 Netscape 或 IE 5.0。

【讨论】：