How to select text on hover

Question

As a highlight, I mean what you do for the text when you hover over it. If you use imgur.com, then you know what I want. I can’t find anything about this, it is frustrating. to help?

Edit: Well, I thought I made it clear enough, but I think not. I do not want me to change the background color on hover. This is trivial. But do you know when you have text on the page and you click on the text and drag the mouse, or you press ctrl + A so that the background color changes and you can copy the text? Do you know emphasizing? A choice? I don’t want it to look like it was changing the background color, I want it to really happen. Upload the image to imgur.com and you will understand what I mean. Please note that when you hover over any of the links to the downloaded image, the text is selected - you can copy it.

That is why it is so difficult to find anything about it. All I get is the result of how to change the background color.

Answer 1

You need to combine these responses with the 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 can use jQuery events with the selectElementText function, but I will not use the jQuery version of selectElementText from another answer, because it uses browser bypass, not the detection function.

Answer 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 the color of the backlight.

Answer 3

IE, ,

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

( window.clipboardData - , , of window.clipboardDatasetData - ).

FF, , , , Flash 10, . - , , , Flash:

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

Answer 4

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

Answer 5

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

a {
    color: red
}

a:hover {
    color: blue
}

or you can also do

#myDiv {
    background-color: red
}

#myDiv:hover {
    background-color: blue
}

Just watch IE, sometimes it frowns when you do something like the second example

Answer 7

Check jQuery docs / examples on hover:

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