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

Question

我试图将光标更改为内容可编辑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>

Answer 1

下面是如何将光标更改为 a 的示例contenteditable div（更改为鼠标/文本插入符，类似于\xea\x95\xaf指示可以进行文本编辑和选择）。
\ndiv还包含继承此设置的子a链接元素，因此需要显式设置为标准cursor。
\n（该示例包含 MDN 文档的链接。）

\n\n

\r\n

\r\n

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

\r\n

<div id="edit" contenteditable>\r\nHi, 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/>\r\nMy <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor"><code>cursor</code></a> style is set to <code>text</code>.<br/>\r\nI\'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/>\r\nSo I\'m almost like a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"><code>textarea</code></a>.\r\n</div>

\r\n

\r\n

\r\n

\n