Highlight an individual character of text block containing links and heading on mouse hover

I am trying to achieve that when hover over a character, the character should change its color. It should work on individual character , links, heading etc.

My following code gives me result that i want but it removes the links and headings.

JS Fiddle: http://jsfiddle.net/bvpodc6z/1/

HTML CODE

<div class="words">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        <a href="#link">LINK</a>
        <h1>
        Heading
        </h1>
        Stet clita kasd gubergren, no sea takimata sanctus e Lorem ipsum dolor sit amet.
    </div>

JS Code

$cont = $('.words');
parts = $.map($cont.text().split(''), function(v){
    return $('<span />', {text:v});
});
$cont.empty().append(parts);

CSS Code

.words span:hover{color:#F00}