0

When a default cursor hovers over a text, it changes to a caret-shaped cursor. However, it only does when over text: everywhere else inside the element,it will not display that specific cursor.

As an example, here's how I want it to work: 1

Is it possible to get that to work?

Shyvha
  • 27
  • 6
  • AFAIK that’s not possible, you would have to rely on element selectors. https://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes – Ted Whitehead Nov 02 '20 at 19:43
  • `document.body.style.cursor = 'default';` – Randy Casburn Nov 02 '20 at 19:43
  • Why do you need to change the cursor when hovering a text ? is it not to allow selection (copy/paste) ? text:hover is not avalaible in CSS because text is not an element. pointer-events can hide an element from the mouse though. – G-Cyrillus Nov 02 '20 at 20:11
  • I'm trying to replace the default I - shaped / carret cursor that appears on text. Using something like `cursor: url('/customcur.png');` , except that this method turns the carret to a customcur.png whenever i'm over the element ; i only want the carret to appear when the mouse is over text like the default carret. @G-Cyrillus To fit the aesthetic and also , why would I want to display a "text can be selected" icon over something that isn't text? i'm gonna modify and add a gif for comprehension. – Shyvha Nov 02 '20 at 20:38
  • unfortunately it won't work. text is not an html element, but you can wrap it in a span inline and set the custom cursor on that span. – G-Cyrillus Nov 02 '20 at 20:42
  • The issue I have with that is when the text adapts a weird shape like the example i've put above. The only way I know of dealing with that would be using `text-align: justify;` to adapt the text shape into a rectangle that fits the element but it's still pretty awkward. Would that work if there's no other possibility? It doesn't **have** to be CSS, JS would be fine. – Shyvha Nov 02 '20 at 20:51

1 Answers1

0

It seems that there's currently no way to apply separate styles (here, cursors) to only text nodes using CSS. However a similar effect can be achieved using <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>
Shyvha
  • 27
  • 6