Hover on table rows

by erick

HTML

<table>
    <tr>
        <td class="test" data-remaining-text="Lorem ipsum et eruditi dolorum sententiae est, ius oporteat inimicus conclusium. Ut pro dolor animal."><strong>A test</strong></td>
        <td>cool<td>
            <tr>
                <td class="test" data-remaining-text="Lorem ipsum et eruditi dolorum sententiae est, ius oporteat inimicus conclusionemque ea. Ex quodsi eripuit senserit nam, ex vocent constituto sit. Et vel summo nominati corrumpit, elit fugit legimus his an. Utamur percipitur disputationi an mei, an m. Ut pro dolor animal.">test</td>
                <td><em>cool</em><td>
                    <tr>
                        
                        <td class="test" data-remaining-text="Lorem ipsum et eruditi dolorum sententiae est, ius oporteat inimicus conclusionemque ea. Ex quodsi eripuit senserit nam, ex vocent constituto sit. Et vel summo nominati corrumpit, elit fugit legimus his an. Utamur percipitur disputationi an mei, an elitr saperet vivendum sed, iudico animal scripta id vel. Eos ei solum tantas vivendo, eu eos mandamus consetetur argumentum. Ut pro dolor animal.">test</td>
                        <td>cool<td>
                            <tr>
                                
                                <td class="test" data-remaining-text="Lorem ipsum et eruditi dolorum sententiae est, ius oporteat inimicus conclusionemque ea. Ex quodsi eripuit senserit nam, ex vocent constituto sit. Et vel summo nominati corrumpit, elit fugit legimus his an. Utamur percipitur disputationi an mei, an elitr saperet vivendum sed, iudico animal scripta id vel. Eos ei solum tantas vivendo, eu eos mandamus consetetur argumentum. Ut pro dolor animal.">test</td>
                                <td>cool<td>
                                    <tr>
                                        
                                    </table>

CSS

.test {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    word-wrap: break-word;
    width: 300px;
    padding: 10px;
    border-bottom: 1px dashed #999;
}

strong {
  font-weight: bold;
}
 
.selected {
    background: #ddd;
    text-shadow: white 1px 1px 0px;
    font-size: 16px;
}

JavaScript

$(function() {
    $('.test').hover(function() {
        var text = $(this).text();
        var remaining = $(this).attr('data-remaining-text');
        var elt = $(this);
        elt.text(text + remaining);
        elt.addClass('selected');
    }, function() {
        var text = $(this).text();
        var remaining = $(this).attr('data-remaining-text');
        var elt = $(this);
        elt.text(text.substring(0, text.length - remaining.length));
        elt.removeClass('selected');
    });
});