Jquery 悬停并显示完整标题

Jquery hover and display back the full title

本文关键字：标题 显示 悬停 Jquery      更新时间：2023-09-26

我目前创建了一个切换div，当div不悬停长标题时，其余字符会自动显示...超过30个，到目前为止我已经成功创建了...函数。

我需要当将鼠标悬停在div 上时，长标题将准确显示长标题全文。

JS小提琴

.JS 

     $('#popup_survey_whitebox_content').hide();

 $("label#popup_survey_label_title").text(function (index, currentText) {
     var newText = currentText.substr(0, 30);
     if (currentText.length > 30) newText += "...";
     return newText;
 });
 $("#popup_survey_whitebox").hover(function () {
     $('#popup_survey_whitebox_content').stop().animate({
         opacity: 1,
         height: "toggle"
     }, 500, function () {
         // Animation complete.
     }).css('position', 'relative');

     $("#popup_survey_end_whitebox").click(function () {
         $("#popup_survey_whitebox").remove();
     });
 });

例如：

全文长标题：测试测试测试测试测试123

长标题 ： 测试测试测试测试测试...

当悬停时，它显示测试测试测试测试123

鼠标输出：测试测试再次测试...

您必须像这样缓存文本：

 $('#popup_survey_whitebox_content').hide();
 var orig = '', // create var to cache the original text
     newText = ''; // create var to cache the new Text with "..."
 $("label#popup_survey_label_title").text(function (index, currentText) {
     orig = currentText;
     newText = currentText.substr(0, 30);
     if (currentText.length > 30) newText += "...";
     return newText;
 });
 $("#popup_survey_whitebox").hover(function () {
     $('#popup_survey_whitebox_content').stop().animate({
         opacity: 1,
         height: "toggle"
     }, 500, function () {
         $("label#popup_survey_label_title").text(orig); // Here put the original text.
     }).css('position', 'relative');
 }, function () {
     $('#popup_survey_whitebox_content').stop().animate({
         opacity: 1,
         height: "toggle"
     }, 500, function () {
         $("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
     }).css('position', 'relative');
 });
 $("#popup_survey_end_whitebox").click(function () {
     $("#popup_survey_whitebox").remove();
 });

更新的小提琴。

语法是这样的：

$(elem).hover(fn, fn);

第一个fn在悬停元素时执行，第二个fn在鼠标离开元素时执行。 它只是MouseEnter，MouseLeave。

相关文章：