how to highlight text on hover

Question

By highlight I mean the thing you do to text when you drag your mouse over it. If you use imgur.com then you know what I want. I can't find anything about this anywhere, it's frustrating. help?

Edit: Okay, I thought I made this clear enough but I guess not. I don't mean I want to change the background color on hover. That's trivial. But you know when you have text on a page, and you click on the text and drag the mouse, or you hit ctrl+A, so that the background color changes and you can then Copy the text? You know, highlighting? Selecting? I don't want it to look like that's happening by changing the background-color, I want it to actually happen. Upload an image on imgur.com and you'll see what I mean. Notice how, when you hover on any of the links to your uploaded image, the text is selected - you're able to Copy it.

This is why it was so hard to find anything about this. All I get are results for how to change the background color.

_"I can't find anything about this anywhere, it's frustrating."_ I am just a bit curious.. where and what did you search? — N 1.1, Mar 14 '10 at 22:21

score 2 · Answer 1 · edited May 23 '17 at 12:00

You need to combine these answers with a mouseenter event:

function selectElementText(el, win) {
    el.focus();
    win = win || window;
    var doc = win.document, sel, range;
    if (win.getSelection && doc.createRange) {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}
window.onload = function() {
   var element = document.getElementById('TheElementToHighlight');
   element.onmouseover = function(e) {
       e = e || window.event;
       var target = e.target || e.srcElement;
       selectElementText(target);
   };
};

You could use jQuery events with the selectElementText function, but I would not use the jQuery version of selectElementText from the other response because it uses browser sniffing rather than feature detection.

`mouseenter` is IE only (pretty sure). `mouseover` works. I have edited your example and fixed a couple things in the process and it works pretty well. http://jsbin.com/akudu4/8/edit#preview — lincolnk, Jun 21 '11 at 21:53

score 1 · Answer 2 · edited Jul 10 '12 at 20:31

1

This may or may not be relevant:

CSS:

::-moz-selection{ background: #B2263A; color:#fff; text-shadow: none; }

::selection { background:#B2263A; color:#fff; text-shadow: none; }

This will change your highlight colour.

edited Jul 10 '12 at 20:31

answered Oct 29 '10 at 16:57

Michael Wilson

13
2

score 0 · Answer 3 · answered Mar 15 '10 at 20:44

For IE, I think you still can use

window.clipboardData.setData('text',text);

(check for the window.clipboardData property - and possibly even the typeof window.clipboardDatasetData - before use).

As for FF, there used to be a hack involving flash that could used as a workaround, but as of Flash 10, that road is closed too. Here's a link to an example of the flash-thing, and some people whose frustration seems to vary with their version of Flash:

http://www.logiclabz.com/javascript/copy-to-clipboard-with-javascript-on-mozilla-firefox-and-ie.aspx

score -1 · Answer 4 · answered Mar 14 '10 at 22:04

-1

use the css pseudo-class :hover http://www.w3schools.com/CSS/css_pseudo_classes.asp

answered Mar 14 '10 at 22:04

buckley

2,060
1
17
12

1

Unless there is a css property for text selection, I don't think that's going to do me much good – herpderp Mar 15 '10 at 06:28

score -1 · Answer 5 · answered Mar 14 '10 at 22:05

-1

<style type="text/css">
    .hoverable:hover {
        background-color: yellow;
    }
</style>

<p>This is some regular text, but if you <span class="hoverable">hover over this bit</span> it will get a yellow background.</p>

answered Mar 14 '10 at 22:05

Marc B

356,200
43
426
500

score -1 · Answer 6 · edited Mar 14 '10 at 23:32

-1

a {
    color: red
}

a:hover {
    color: blue
}

or you can also do

#myDiv {
    background-color: red
}

#myDiv:hover {
    background-color: blue
}

Just watch IE, it sometimes frowns upon you doing things like the 2nd example

edited Mar 14 '10 at 23:32

PetersenDidIt

25,562
3
67
72

answered Mar 14 '10 at 22:05

cdnicoll

574
1
6
17

2

`Just watch IE, it sometimes frowns upon you doing things like the 2nd example` - Usually IE does things consistently. There's not often a sometimes. It's either an always or a never. By that statement I'm assuming you're referring to the fact that `:hover` is only supported on `` elements in versions lower than IE7. IE7 and IE8 support `:hover` on practically all rendered elements. – Andy E Mar 14 '10 at 22:34

score -1 · Answer 7 · answered Mar 14 '10 at 22:09

-1

Check out the jQuery docs/examples on hover:

http://api.jquery.com/hover/

answered Mar 14 '10 at 22:09

Chris B.

2,532
1
15
9

how to highlight text on hover

7 Answers7