jQuery懸停並顯示完整標題

Question

我目前正在創建一個切換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();
     });

 });

例如 ：

全文長標題： testingtestingtestingtestingtesting123

長標題： testingtestingtestingtestingtesting ...

懸停時顯示testtestingtestingtestingtesting123

mouseout：再次進行testtestingtestingtestingtesting ...

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

更新了小提琴。

---

語法是這樣的：

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

第一fn當你懸停元素和第二被執行fn執行，當你鼠標移出元素。 它只是mouseenter，mouseleave。