Show a JS added link only when I hover over TD

Question

The JS bellow expands/collapse a block of text which is longer that 30 chars in a TD row by pressing one of the less/more links. What I would like to do is to show the More link only when I hover over the TD cell, and hide it the rest of the time. Any idea how to do that? Thanks!

 var $j = jQuery.noConflict(); $j('.showmore').each(function() { var $pTag = $j(this).find('span'); if($pTag.text().length > 30){ var shortText = $pTag.text(); shortText = shortText.substring(0, 30); $pTag.addClass('fullArticle').hide(); $pTag.append('<a class="read-less-link"><br><span style="color: #2c4e9b"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i> Less</span></a>'); $j(this).append('<a class="read-more-link preview">'+shortText+'... <span style="color: #2c4e9b"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i> More</span></a>'); } }); $j(document).on('click', '.read-more-link', function () { $j(this).hide().parent().find('.preview').slideUp().prev().slideDown(); }); $j(document).on('click', '.read-less-link', function () { $j(this).parent().slideUp().next().show(); $j(this).parents('.showmore').find('.read-more-link').slideDown(300); });

Answer 1

There's a good css based solution.

You can add a class to your 'More' link, then make it display:none or visibility: hidden

then with css, you can do following with

tr:hover .more {
 visibility:visible;
}

Or

tr:hover .more {
 display:block;
}