Как изменить стиль курсора для элементов в редактируемом 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>

html contenteditable mouse-cursor
person Use the fork Luke    schedule 12.01.2012    source источник
comment
Почему <div> является прямым потомком <html>?   -  person js-coder    schedule 12.01.2012
comment
Не думайте, что это проблема. Всё равно отредактировал.   -  person Use the fork Luke    schedule 12.01.2012
comment
Это не проблема, очевидно. Но очень странно это делать.   -  person js-coder    schedule 12.01.2012

Ответы (3)


arrow_upward
2
arrow_downward

Вот пример того, как изменить курсор для contenteditable div (в курсор мыши/текста, похожий на ꕯ, чтобы указать, что редактирование и выделение текста возможно).
div также содержит дочерние элементы a link, которые наследуют этот параметр и поэтому необходимо явно указать стандарт 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>

person handle    schedule 17.04.2018

arrow_upward
0
arrow_downward

Для конкретного элемента, который находится внутри div[contenteditable=true], измените курсор, вам необходимо изменить стиль вашего элемента div. Например

/*

** Я хочу изменить курсор для изображения. Вам нужно просто указать курсор: указатель | авто | 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>

person Bhautik Chudasama    schedule 17.04.2018

arrow_upward
-1
arrow_downward 

          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 (каскадные таблицы стилей). Самый простой способ изменить тип курсора — добавить свойство style="cursor: crosshair" в HTML-тег. например

Text

Следующие ссылки должны изменить указатель после «наведения курсора». Они показывают ряд встроенных стилей курсора, которые вы можете использовать:

авто

перекрестие

дефолт

указатель

помощь

шаг

текст

ждать

NW-изменить размер

n-изменить размер

изменить размер

w-изменить размер

рука

электронное изменение размера

sw-изменить размер

s-изменить размер

se-resize

Некоторые стили курсора могут не работать в зависимости от браузера. Пользовательские указатели мыши

Следующий HTML-код отобразит пользовательский курсор:

Text

Пользовательский URI

Пользовательский агент (то есть браузер) должен иметь возможность обрабатывать тип курсора. Некоторыми возможными типами файлов, которые могут работать, являются файлы .cur, .csr и .ani. Приведенный выше пример работает в Internet Explorer для Windows, но не в Netscape или IE 5.0 для Unix.

person Community    schedule 05.04.2013