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>
On
For the specific element that inner in div[contenteditable=true] change the cursor, you need to changes in your div element style. for example
/*
** I want to change a cursor for an image. You need to just specify cursor: pointer | auto | text; in your element style.
For happen we have used different types of selectors.
*/
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> 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
Changing the Mouse Pointer
When this page loads, the mouse pointer should change to a 'hand'. A custom cursor is defined by the "cursor:" style property CSS (cascading style sheets). The easiest way to change the cursor type is to add a style="cursor: crosshair" property within an HTML tag. e.g.
TextThe following links should change the pointer after being 'moused-over'. These show a number of built-in cursor styles that you can use:
auto
crosshair
default
pointer
help
move
text
wait
nw-resize
n-resize
ne-resize
w-resize
hand
e-resize
sw-resize
s-resize
se-resize
Some of the cursor styles may not work, depending on the browser. Custom Mouse Pointers
The following HTML code will display a custom cursor:
TextA custom URI
The user agent (i.e. browser) must be able to handle the type of cursor. Some possible file types that may work are .cur, .csr and .ani files. The above example works in Internet Explorer for Windows, but not in Netscape or IE 5.0 for Unix.
Here's an example of how to change the cursor for a
contenteditablediv(into a mouse/text caret similar toꕯto indicate that text editing and selection is possible).The
divalso contains childrenalink elements which inherit this setting and so need to be explicitly set to the standardcursor.(The example contains links to the documentation at MDN.)