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.

Solution 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.

Solution 2

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.

Comments

[Andy E]

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 <a> elements in versions lower than IE7. IE7 and IE8 support :hover on practically all rendered elements.

[herpderp]

Unless there is a css property for text selection, I don't think that's going to do me much good

[lincolnk]

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. jsbin.com/akudu4/8/edit#preview