Отображать другой курсор над текстом (НЕ элемент)

Когда курсор по умолчанию наводится на текст, он меняется на курсор в форме курсора. Однако это работает только над текстом: в любом другом месте внутри элемента этот конкретный курсор не отображается.

Например, вот как я хочу, чтобы это работало: 1

Можно ли заставить это работать?


javascript html css mouse-cursor
person Shyvha    schedule 02.11.2020    source источник
comment
Насколько я знаю, это невозможно, вам придется полагаться на селекторы элементов. stackoverflow.com/ вопросы/5688712/   -  person Ted Whitehead    schedule 02.11.2020
comment
Зачем нужно менять курсор при наведении на текст? не разрешать выбор (копировать/вставить)? text:hover недоступен в CSS, потому что текст не является элементом. Однако события-указатели могут скрыть элемент от мыши.   -  person G-Cyrillus    schedule 02.11.2020
comment
Я пытаюсь заменить I-образный/каретный курсор по умолчанию, который появляется в тексте. Используя что-то вроде cursor: url('/customcur.png'); , за исключением того, что этот метод превращает каретку в customcur.png всякий раз, когда я нахожусь над элементом; я хочу, чтобы каретка появлялась только тогда, когда мышь находится над текстом, как каретка по умолчанию. @ G-Cyrillus Чтобы соответствовать эстетике, а также, зачем мне отображать текст, который можно выбрать, над чем-то, что не является текстом? Я собираюсь изменить и добавить GIF для понимания.   -  person Shyvha    schedule 02.11.2020
comment
к сожалению, это не сработает. текст не является html-элементом, но вы можете обернуть его встроенным диапазоном и установить пользовательский курсор на этот диапазон.   -  person G-Cyrillus    schedule 02.11.2020
comment
Проблема, с которой я сталкиваюсь, заключается в том, что текст принимает странную форму, как в примере, который я привел выше. Единственный известный мне способ справиться с этим - использовать text-align: justify; для преобразования формы текста в прямоугольник, который соответствует элементу, но это все еще довольно неудобно. Будет ли это работать, если нет другой возможности? Это не обязательно CSS, подойдет JS.   -  person Shyvha    schedule 02.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, в настоящее время нет способа применить отдельные стили (в данном случае курсоры) только к текстовым узлам с помощью CSS. Однако аналогичный эффект может быть достигнут с помощью <span>s:

CSS:

span{
cursor:url("/images/cursorTextSelect.png") ,default;
}

HTML:

<span>This example text fills a line</span>
<br>
<span>Some more example text that fills another line.</span>
person Shyvha    schedule 02.11.2020