Question

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

我需要在悬停div时长标题将显示长标题全文。

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

 });

例如：

全文长标题： testingtestingtestingtestingtesting123

长标题： testingtestingtestingtestingtesting ...

悬停时显示 testingtestingtestingtestingtesting123

mouseout： testingtestingtestingtestingtesting ... 再次

Answer 1

你必须像这样缓存你的文字：

 $('#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();
 });

Updated Fiddle.

语法是：

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

当您悬停元素时，第一个fn会被执行，而当您将鼠标移出元素时，会执行第二个fn。它只是mouseenter，mouseleave。

Jquery悬停并显示完整的标题

1 个答案:

Updated Fiddle.