By highlight I mean the thing you do to text when you drag your mouse over it. If you use imgur 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 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.

By highlight I mean the thing you do to text when you drag your mouse over it. If you use imgur. 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. 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.

• javascript
• jquery
• hover
• highlight

• "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 Commented Mar 14, 2010 at 22:21

7 Answers 7

You need to bine 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.

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.

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./javascript/copy-to-clipboard-with-javascript-on-mozilla-firefox-and-ie.aspx

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

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

Check out the jQuery docs/examples on hover:

http://api.jquery./hover/

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