0

I am having trouble highlighting a certain piece of text when a user has dragged the cursor over it in jQuery

I have tried using the .select() function that jQuery gives to you but it seems to have not worked on a

Here's a example

<div>
  Some random text <span class="highlighted_text">Highlighted text</span>
</div>

when the user drags their cursor over a certain piece of text it wraps on the text they dragged over in a tag

thanks,

Arnav

fuzzy buddy
  • 99
  • 1
  • 3
  • 10
  • Do you mean mouse hover when you say dragged? – Faizan May 12 '19 at 09:48
  • Like when a user drags their cursor over a certain piece of text it creates a blue background color over the text they selected – fuzzy buddy May 12 '19 at 09:56
  • [Get the Highlighted/Selected text](https://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text) Is this what you are looking for? – Faizan May 12 '19 at 10:04

1 Answers1

0

You could make it highlighted using CSS simply by doing this :

CSS: 

.highlighted_text:hover {
    background-color: blue;
    color: white;
}

HTML :

<div>
  Some random text <span class="highlighted_text">Highlighted text</span>
</div>

But if you want to still be highlighted after the mouse loses focus over the text part, you'd have to make it a bit more complex, like this :

CSS :

@keyframes hover {
  0% {
    color: #000;
  }
  100% {
    background-color: #00F;
    color: #FFF;
  }
}

.highlighted_text {
  animation-name: hover;
  animation-duration: 1000ms;
  animation-fill-mode: both;
  animation-play-state: paused;      
}

.highlighted_text:active,
.highlighted_text:focus,
.highlighted_text:hover {
  animation-play-state: running;
}

HTML :

<div>
  Some random text <span class="highlighted_text">Highlighted text</span>
</div>
mattdaspy
  • 842
  • 1
  • 5
  • 11
  • When the user highlights a piece of text is their a way to wrap that piece that they highlighted in a Piece they highlighted – fuzzy buddy May 12 '19 at 21:02