CSS hover based on caret position (contenteditable div)?

Asked Oct 29 '14 at 13:38

Active Oct 29 '14 at 13:43

Viewed 57 times

I have something like this:

<div class="content" contenteditable="true">
  <p>Some text</p>
  <p>Some other text</p>
</div>

Right now I can do .content p:hover (e.g. color: red) to manipulate the CSS. But that only works with the cursor.

How can I do it so I can manipulate CSS based on the caret's position (specific paragraph)?

edited Oct 29 '14 at 13:43

asked Oct 29 '14 at 13:38

alexchenco

Can you show the markup of the caret? – cport1 Oct 29 '14 at 13:39
1

can you describe a bit that final effect you want to achieve ? Highlighting up to a specific (*hovered*) letter ? or a specific paragraph ? – Gabriele Petrioli Oct 29 '14 at 13:40
how can you place a caret into the paragraph? is it about a Wysiwig editor? – Fabrizio Calderan Oct 29 '14 at 13:42
OK, I updated the answer. – alexchenco Oct 29 '14 at 13:43
Im unsure what you want - do you want the latter you are hovering on to be red? If you are looking for text-selection within the paragraph to be styled, you can use the `::selection` pseudo-element. Otherwise, if its the former you can't do it as individual letters are not elements. – somethinghere Oct 29 '14 at 13:46
1

http://jsfiddle.net/p375c3ys/ – dfsq Oct 29 '14 at 14:22

0 Answers0