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.

Answer 1

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.