Underline words on mouseover after X seconds

Question

What I'm trying to do is: when you mouse over any word in a body of text say for two seconds, it will become underlined. And if you click it, it will stay underlined until you click anywhere else or you click it one more time. Any suggestions?

Answer 1

There is no built in event so you would have to split the text and wrap each word in an element. It can become very slow with large amounts of text.

See http://stackoverflow.com/questions/3445151/how-can-i-highlight-every-single-word-in-jquery-so-that-i-can-provide-a-definitio/3445188#3445188

Have a look at this sample - http://jsbin.com/ukuza5/3/edit Will only work with plain text - no html inside p.

Answer 2

As far as I know, if you are talking just words in a <p> then are SOL without some seriously obtrusive javascript. If you don't mind getting obtrusive then what you could do is go in, take the contents of the <p> and put each individual one in a <span> or something along those lines. Then comes the highlighting JS.

Note: This is jQuery

var timer;

$("span").mouseover(function() {
  timer = timeout(highlight(this), 2000);
});

$("span").mouseout(function() {
  clearTimeout(timer);
});

function underline(jObject) {
  jObject.css("text-decoration", "underline");
}

It is highly obtrusive, not pretty, and I'm not 100% it will work but that should give you an idea of what you are looking for at the very least.