Как изменить стиль курсора для элементов в редактируемом div - PullRequest
Новая
       12

Как изменить стиль курсора для элементов в редактируемом div

5 голосов
/ 12 января 2012

Я пытаюсь изменить курсор на «указатель» для определенных элементов в редактируемых элементах содержимого.

Приведенный ниже 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>

Ответы [ 3 ]

0 голосов
/ 17 апреля 2018

Вот пример того, как изменить курсор для 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>
0 голосов
/ 17 апреля 2018

Для конкретного элемента, который находится внутри элемента 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>
0 голосов
/ 05 апреля 2013 
          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

Изменение указателя мыши

Когда эта страница загружается, указатель мыши должен измениться на «руку». Пользовательский курсор определяется свойством стиля «курсор:» CSS (каскадные таблицы стилей). Самый простой способ изменить тип курсора - добавить свойство style = "cursor: crosshair" в тег HTML. например,

Текст

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

авто

перекрестие

по умолчанию

указатель

помощь

ход

текст

ожидание

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

п изменение размера

пе изменение размера

ш изменение размера

рука

е изменение размера

SW изменение размера

с изменением размера

себе изменение размера

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

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

Текст

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

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

...