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

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

Answer 2

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

Answer 3

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

Answer 4

Check out the jQuery docs/examples on hover:

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

Answer 5

See this question's answers.

Answer 6

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

Answer 7

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 hilite colour..