Изменить тип курсора, когда мышь проходит над выделенным текстом, используя HTML/Javascript

Мне нужно изменить тип курсора, когда мышь попадает на выделенный текст.

Здесь вы можете найти поясняющее изображение:

http://img190.imageshack.us/img190/1786/72162829.png

В этом примере пользователь должен перетащить некоторый текст в текстовую область. Поскольку традиционный указатель не интуитивно понятен, я хотел бы использовать указатель «перемещения» (курсор: указатель). Я сделал это изображение с помощью фотошопа. Кто-нибудь знает, как сделать это по-настоящему в HTML/CSS/JAVASCRIPT?


javascript html css cursor textrange
person Licx    schedule 29.09.2009    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Стили выбора (не поддерживаются в IE) — единственное, что приходит на ум для достижения желаемый эффект:

::selection {
    color: red;
    cursor: move;   
}

::-moz-selection {
    color: red;
    cursor: move;
}

... но, хотя текст становится красным (это просто элемент управления), кажется, что курсор не меняется ни в Safari, ни в Firefox. Однако если вы поместите текст в элемент HTML и примените стиль к элементу (через идентификатор или класс), все будет работать нормально.

Вы можете обойти эту проблему, используя метод JavaScript window.getSelection() для переноса выделенный текст в элементе DOM, а затем стилизовать этот элемент DOM. Однако я не уверен, возможно ли это (и это может быть немного хакерским).

person Steve Harrison    schedule 29.09.2009

arrow_upward
0
arrow_downward

Как указывает Tzury Bar Yochay, вы можете сделать это как с помощью CSS, так и с помощью JavaScript.

CSS. Используйте свойство стиля cursor, которое может быть любым из нескольких стандартных значения (что предпочтительнее) или ваш собственный файл курсора (но всегда включайте запасной вариант, используя одно из стандартных значений). Вот пример изменения курсора любого элемента с классом clickable на стандартный курсор для чего-то, что вы можете щелкнуть:

.clickable {
  cursor: pointer;
}

(Это должно появиться в вашем файле таблицы стилей или внутри элемента style в head документа [если вы не можете использовать отдельный файл по какой-либо причине].) Затем вы можете применить этот класс к соответствующим элементам.

JavaScript. Свойство style элемента предоставляет стили CSS, поэтому вы можете сделать следующее:

var element = document.getElementById('someid');
element.style.cursor = 'pointer';

... хотя я обычно предпочитаю делать это, добавляя/удаляя имя класса через свойство className элемента (которое представляет собой список классов с разделителями-пробелами для элемента):

var element = document.getElementById('someid');
element.className += " clickable";
person T.J. Crowder    schedule 29.09.2009
comment
Я понимаю, но даже в этом случае курсор будет перемещаться по всему тексту, а не только по выделенному. Есть ли способ установить свойства CSS только для выделенного текста? - person Licx; 29.09.2009
comment
Да, заключив выделенный текст в span и применив класс к этому диапазону. Я не думаю, что есть псевдокласс CSS для выделенного текста. - person T.J. Crowder; 29.09.2009

arrow_upward
0
arrow_downward

Вот очень простой пример, который вы можете проверить на скрипте js. http://jsfiddle.net/umairb3/hbhvumn3/1/

p.normal::selection {
    background:#cc0000;
    color:#fff;
}

p.moz::-moz-selection {
    background:#cc0000;
    color:#fff;
}

<p class="normal moz">Hello world</p>
<p>Hello world</p>
person Umair    schedule 26.03.2015

arrow_upward
-2
arrow_downward

CSS

<style type="text/css">
    body{
    cursor: url(mycursor.cur)
}
</style>

JavaScript

document.body.style.cursor = 'wait';
person Tzury Bar Yochay    schedule 29.09.2009
comment
Курсор должен двигаться ТОЛЬКО тогда, когда мышь находится над выделенным текстом. С помощью этого кода курсор перемещается по всему документу. - person Licx; 29.09.2009
comment
это был просто пример. настроить его под свои нужды, как вы хотите - person Tzury Bar Yochay; 29.09.2009
comment
@Licx, мне придется проголосовать за него .. а также обесценить работу SPOON FEEDING .. Это приемлемый и собственный пост .. Я не нахожу ответов, почему бы не проголосовать за него? - person InfantPro'Aravind'; 11.01.2010