Cambia testo al passaggio del mouse, quindi torna al testo precedente

Question

Ho un sistema di commenti e ogni commento ha un pulsante che normalmente visualizza il numero di risposte ad esso. Voglio che quando un utente passa sopra il pulsante, il testo cambia da "3 risposte" a "Rispondi!", E quindi, quando il mouse lascia il pulsante, il testo torna a "3 risposte".

Poiché il numero di risposte varia per ogni commento, non è possibile eseguire un semplice script mouseover/mouseout. Un modo per aggirarlo sarebbe quello di passare il numero di risposte come variabile, e fare una piccola funzione per prendersene cura. Ma ci deve essere un modo più semplice. Ho provato ad usare: hover thing in css per modificare il contenuto del tag (con il contenuto della proprietà css), ma non ancora fortuna.

Qualsiasi aiuto apprezzato, grazie!

Answer 1

Sì, è possibile utilizzare i CSS content. Per passare dal testo normale a "Rispondi!", Inserisci il testo normale in un span e nascondilo al passaggio del mouse.

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/

Edit: questo funziona in IE8, ma non nella sua modalità di compatibilità, quindi presumo IE7 è fuori. Sarebbe un problema?

Answer 2

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

Penso che si potrebbe utilizzare questo tipo di funzione, quando ci si ferma in bilico, si alimenta la chiamata AJAX tuo commento id, e restituisce il # delle risposte per quel commento. Puoi decidere come vuoi memorizzare/recuperare il tuo ID commento.

Answer 3

vorrei usare una combinazione di jQuery .hover() e 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); 
    }); 

edit: sentitevi liberi di refactoring l'anonimo functi in uso come i due callback al passaggio del mouse, poiché sono esattamente uguali :)

Answer 4

Penso che questo sarebbe un modo semplice per farlo. Utilizza due span all'interno del tuo pulsante, uno con contenuto 'x risposte', uno con contenuto 'Rispondi!'. Usando i CSS e: passa il mouse, basta cambiare lo span mostrato al passaggio del mouse.

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

Controllare l'esempio JsFiddle.Funziona bene su tutto, poiché usa le cose basilari per raggiungere un obiettivo altrettanto basilare.

Answer 5

Se qualcuno vuole provare lo stesso sul link del menu, (diverso testo in lingua al passaggio del mouse) Ecco l'html jsfiddle example

:

<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:"ಕನ್ನಡ"; 
} 

Answer 6

altro modo per farlo, è quello di creare due span con il pulsante, e avere classi per ogni span.

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

Lasciare la seconda vuoto, e in css, scrivere:

button{ 
    //your decorative code here } 

button:hover .replies{ 
    display: none; } 

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

Questo è simile alla prima risposta, ma tale soluzione non funziona sempre con un preprocessore come SASS, o meno.

Answer 7

Tanto semplice come potrebbe essere:

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

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

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

}, function() { 

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