时间戳

首页 > 解决方案 > 仅当我将鼠标悬停在 TD 上时才显示 JS 添加的链接

javascript - 仅当我将鼠标悬停在 TD 上时才显示 JS 添加的链接

问题描述

JS 波纹管展开/折叠一段文本，该文本块长于 TD 行中的 30 个字符，方法是按下少/多链接之一。我想做的是仅当我将鼠标悬停在 TD 单元格上时才显示更多链接，并在其余时间隐藏它。知道怎么做吗？谢谢！

在此处输入图像描述

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);
});

标签： javascripthtml

解决方案

有一个很好的基于 css 的解决方案。

您可以在“更多”链接中添加一个类，然后将其设为 display:none 或 visibility: hidden

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

tr:hover .more {
 visibility:visible;
}

或者

tr:hover .more {
 display:block;
}

推荐阅读