blue text

by rrosegregoryy

HTML

<div>
  <p>hello my name is rose how are you </p>
</div>

CSS

p {
  font-size: 26px;
}

.hovered {
  filter: blur(3px);
  }

JavaScript

(function (count) {
  'use strict';
  (function wrap(el) {
    $(el).filter(':not(script)').contents().each(function () {
      // Node.* won't work in IE < 9, use `1`
      if (this.nodeType === Node.ELEMENT_NODE) {
        wrap(this);
      // and `3` respectively
      } else if (this.nodeType === Node.TEXT_NODE && !this.nodeValue.match(/^\s+$/)) {
        $(this).replaceWith($.map(this.nodeValue.split(/(\S+)/), function (w) {
          return w.match(/^\s*$/) ? document.createTextNode(w) : $('<span>', {id: count = count + 1, text: w}).get();
        }));
      }
    });
  }('body'));
}(0));

var hoverTimeout;
$('span').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('hovered');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('hovered');
    }, 1000);
});