![](/img/trans.png)
[英]i want to put a link on the image only while hover and it worked , but when i hover over the link it start lagging
[英]Show a JS added link only when I hover over TD
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); });
有一个很好的基于 css 的解决方案。
您可以将 class 添加到“更多”链接,然后使其显示:无或可见性:隐藏
然后使用 css,您可以执行以下操作
tr:hover .more {
visibility:visible;
}
或者
tr:hover .more {
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.