How to change cursor style for elements in editable div

Question

I am trying to change the cursor to "pointer" for specific elements in content editable divs.

The below html code does not work as expected in Internet Explorer 8 and 9.
Any ideas how to set cursor style for elements in editable divs?

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

Answer 1

Here's an example of how to change the cursor for a contenteditable div (into a mouse/text caret similar to ꕯ to indicate that text editing and selection is possible).
The div also contains children a link elements which inherit this setting and so need to be explicitly set to the standard cursor.
(The example contains links to the documentation at 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>