僅當我 hover over TD 時才顯示 JS 添加的鏈接

Question

JS 波紋管展開/折疊一段文本，該文本塊長於 TD 行中的 30 個字符，方法是按下少/多鏈接之一。 我想做的是僅當我在 TD 單元上的 hover 時才顯示更多鏈接，並將其隱藏為當時的 rest。 知道怎么做嗎？ 謝謝！

 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

有一個很好的基於 css 的解決方案。

您可以將 class 添加到“更多”鏈接，然后使其顯示：無或可見性：隱藏

然后使用 css，您可以執行以下操作

tr:hover .more {
 visibility:visible;
}

或者

tr:hover .more {
 display:block;
}