更改懸停文字，然後返回到前一個文字

我有一個評論系統，每個評論都有一個按鈕，通常會顯示對其的回覆數量。我希望當用戶懸停在按鈕上時，文本從「3回覆」變爲「回覆！」，然後，當鼠標離開按鈕時，文本返回到「3回覆」。更改懸停文字，然後返回到前一個文字

因爲每條評論的回覆數量不同，所以我不能做一個簡單的mouseover/mouseout腳本。解決這個問題的一種方法是將答覆的數量作爲變量傳遞，並做一個小功能來處理它。但必須有一個更簡單的方法。我嘗試在CSS中使用：懸停的東西來改變標籤的內容（與CSS屬性內容），但沒有運氣。

任何幫助表示感謝，謝謝！

來源

2012-03-28 Sophivorus

這聽起來像一個糟糕的設計。用戶如何猜測他們應該懸停文本，告訴他們有多少回覆才能發起自己的回覆？不要依賴文本本身，而是將其包裹在一個範圍內並定位該元素。 – MetalFrog 2012-03-28 18:12:55

@MetalFrog文字有一個按鈕的外觀，我不認爲它會花費太多時間來理解。 – Sophivorus 2012-03-28 18:16:32

是的，你可以使用CSS content。要在普通文本和「回覆！」之間切換，請將普通文本置於span中，並在懸停時隱藏該文本。

HTML：

<button><span>3 replies</span></button>

CSS：

button {width:6em} 
button:hover span {display:none} 
button:hover:before {content:"Reply!"}

的jsfiddle：

http://jsfiddle.net/4xcw7/2/

編輯：這部作品在IE8，而不是在它的兼容模式，所以我想IE7已經出來。這會是一個問題嗎？

來源

2012-03-28 18:27:31

不，這不會是一個問題。謝謝，很簡單的解決方案。 – Sophivorus 2012-03-28 18:42:57

不錯的解決方案.... – Muath 2014-12-02 07:32:20

由於某種原因，它不適合我。改變'：之前'到'：之後'幫助。 – 2017-11-23 09:32:33

$('#button_id').hover(
    function(){ 
     $(this).text('Reply!'); 
    }, 
    function(){ 
     $.ajax({ 
      url: 'script.php', 
      type: 'post', 
      data: comment_id, 
      success: function(num_replies){ 
       $('#button_id').text(num_replies + ' replies'); 
      } 
     }); 
    } 
);

我想你可以使用這種功能，當你停止徘徊，你喂AJAX調用您的評論的ID，並返回回覆該評論的＃。您可以決定如何存儲/檢索您的評論ID。

來源

2012-03-28 18:16:25

@tada我絕對同意。 – jbabey 2012-03-28 18:19:01

正如我所說，答覆的數量隨着每個評論而不同，所以這個函數不會伎倆。 – Sophivorus 2012-03-28 18:19:44

什麼商店數量答覆？一個數據庫？可能會放一個ajax調用函數來獲取回覆＃。 – 2012-03-28 18:21:44

我會使用jQuery .hover()和jQuery的組合.data():

http://jsfiddle.net/5W4Bd/

HTML：

<div id="myDiv">default text</div>

的javascript：

$('#myDiv') 
    .data('textToggle', 5) 
    .hover(function (e) { 
     var that = $(this); 

     // get the text from data attribute 
     var textToSet = that.data('textToggle'); 

     // save the current text so it can be reverted 
     that.data('textToggle', that.text()); 

     // set the new text 
     that.text(textToSet); 
    }, function (e) { 
     var that = $(this); 

     // get the text from data attribute 
     var textToSet = that.data('textToggle'); 

     // save the current text so it can be reverted 
     that.data('textToggle', that.text()); 

     // set the new text 
     that.text(textToSet); 
    });

編輯：隨意重構匿名functi因爲它們完全一樣:)

來源

2012-03-28 18:17:16 jbabey

嘿，謝謝你的回答。我認爲使用data（）函數非常優雅，所以我試圖讓你的函數起作用，但是Lister先生髮布了一個更簡單的解決方案。 – Sophivorus 2012-03-28 18:42:21

@LFS很好，我甚至不知道那個內容屬性！ – jbabey 2012-03-28 19:43:12

我認爲這將是一個直接的方式去實現它。在您的按鈕中使用兩個跨度，一個內容爲'x回覆'，一個內容爲'回覆！'。使用CSS和：懸停，您只需切換懸停時顯示的跨度。

HTML：

<button> 
    <span class="replies">5 Replies</span> 
    <span class="comment">Reply!</span> 
</button>

CSS：

button .comment { display: none; } 
button:hover .replies { display: none; } 
button:hover .comment { display: inline; }

檢查JsFiddle例子。這在任何事情上都很好，因爲它使用非常基本的東西來實現一個基本的目標。

來源

2012-03-28 21:46:53 MichD

非常簡單的解決方案，謝謝！ – Sophivorus 2012-03-30 13:52:21

如果有人想嘗試菜單鏈接一樣，（懸停不同語言文本）這裏是jsfiddle example

HTML：

<a align="center" href="#"><span>kannada</span></a>

CSS：

span { 
    font-size:12px; 
} 
a { 
    color:green; 
} 
a:hover span { 
    display:none; 
} 
a:hover:before { 
    color:red; 
    font-size:24px; 
    content:"ಕನ್ನಡ"; 
}

來源

2013-04-24 09:10:25 Rao

另一個方法是使用按鈕創建兩個跨度，併爲每個跨度設置類。

<button> 
    <span class="replies">3 Replies</span> 
    <span class="comments"></span> 
<button>

離開第二個空，在CSS中，寫上：

button{ 
    //your decorative code here } 

button:hover .replies{ 
    display: none; } 

button:hover .comments:before{ 
    content:"Reply!"; }

這類似於第一個答案，但這個答案並不總是像SASS，或更少的預處理工作。

來源

2015-09-30 15:54:32 dickinsonk9

簡單，因爲它可能是：

$('.controls button.filter').hover(function(){ 

    var original = $('#current_filter').text(); 
    var descr = $(this).attr("title"); 

    $('#current_filter').html(descr); 

}, function() { 

    $('#current_filter').text(original); 
});

來源

2016-12-17 10:29:35 Peter

更改懸停文字，然後返回到前一個文字

回答

相關問題