Cambie el texto al desplazarse, luego regrese al texto anterior

Question

Tengo un sistema de comentarios y cada comentario tiene un botón que normalmente muestra el número de respuestas. Quiero que cuando un usuario pasa el cursor sobre el botón, el texto cambie de "3 respuestas" a "¡Responder!", Y luego, cuando el mouse sale del botón, el texto vuelva a "3 respuestas".

Debido a que el número de respuestas varía para cada comentario, no puedo hacer un simple script mouseover/mouseout. Una forma de evitarlo sería pasar el número de respuestas como una variable y hacer una pequeña función para encargarse de ello. Pero debe haber una manera más simple. Intenté usar el elemento: hover en css para cambiar el contenido de la etiqueta (con el contenido de la propiedad css), pero todavía no tuve suerte.

Cualquier ayuda apreciada, gracias!

Answer 1

Sí, puede usar CSS content. Para alternar entre el texto normal y "¡Responder!", Coloque el texto normal en span y oculte eso al pasar el ratón.

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/

Editar: esto funciona en IE8, pero no en su modo de compatibilidad, por lo que supongo IE7 está fuera. ¿Sería eso 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'); 
      } 
     }); 
    } 
); 

Creo que se podría utilizar este tipo de función, cuando deje de suspensión, se alimenta el Ajax llame a su comentario de identificación, y se devuelve el # de respuestas que el comentario. Puede decidir cómo desea almacenar/recuperar su ID de comentario.

Answer 3

me gustaría utilizar una combinación de jQuery .hover() y 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); 
    }); 

edición: no dude en refactorizar el anonimato Functi en utilizado como las dos devoluciones de llamada para desplazarse, ya que son exactamente lo mismo :)

Answer 4

Creo que esta sería una manera directa de hacerlo. Use dos espacios dentro de su botón, uno con contenido 'x respuestas', uno con contenido '¡Responder!'. Al usar CSS y: hover, usted simplemente cambia qué lapso se muestra al pasar el 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; } 

Compruebe el ejemplo JsFiddle.Esto funciona bien en todo, ya que usa cosas muy básicas para lograr un objetivo igualmente básico.

Answer 5

Si alguien quiere probar lo mismo en los enlaces del menú, (diferente texto en el idioma en vuelo estacionario) aquí es el 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

Otro forma de hacerlo, es crear dos tramos con el botón y tener clases para cada tramo.

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

Deje el segundo vacía, y en css, escribe:

button{ 
    //your decorative code here } 

button:hover .replies{ 
    display: none; } 

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

Esto es similar a la primera respuesta, pero esa respuesta no siempre funciona con un preprocesador como SASS, o menos.

Answer 7

Tan simple como podría ser:

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

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

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

}, function() { 

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