web-dev-qa-db-fra.com

Changer le texte en vol stationnaire, puis revenir au texte précédent

J'ai un système de commentaires, et chaque commentaire a un bouton qui affiche normalement le nombre de réponses. Je souhaite que lorsqu'un utilisateur survole le bouton, le texte passe de "3 réponses" à "Répondre!", Puis, lorsque la souris quitte le bouton, le texte retourne à "3 réponses".

Étant donné que le nombre de réponses varie pour chaque commentaire, je ne peux pas faire un simple script mouseover/mouseout. Une solution consiste à passer le nombre de réponses sous forme de variable et à créer une petite fonction pour s'en occuper. Mais il doit y avoir un moyen plus simple. J'ai essayé d'utiliser le: hover chose en CSS pour changer le contenu de la balise (avec le contenu de la propriété css), mais pas de chance pour le moment.

Toute aide appréciée, merci!

javascriptjquerycss
20
Sophivorus

Oui, vous pouvez utiliser CSS content. Pour basculer entre le texte normal et "Répondre!", Placez-le dans une variable span et masquez-le lors du survol.

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: cela fonctionne dans IE8, mais pas dans son mode de compatibilité, donc je suppose que IE7 est sorti. Cela poserait-il un problème?

41
Mr Lister

Je pense que ce serait une solution simple. Utilisez deux plages à l'intérieur de votre bouton, l'une avec le contenu 'x réponses', l'autre avec le contenu 'Répondre!'. En utilisant CSS et: hover, il vous suffit de changer l’étendue affichée en survol.

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

Vérifiez le JsFiddle exemple. Cela fonctionne très bien dans presque tout, car il utilise des choses très basiques pour atteindre un objectif tout aussi fondamental.

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

Je pense que vous pouvez utiliser ce type de fonction. Lorsque vous arrêtez de survoler, vous alimentez l'appel id de commentaire ajax, qui renvoie le nombre de réponses pour ce commentaire. Vous pouvez décider de la manière dont vous souhaitez stocker/récupérer votre identifiant de commentaire. 

1
jeffery_the_wind

Je voudrais utiliser une combinaison de jQuery . Hover () et 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: n'hésitez pas à refactoriser la fonction anonyme utilisée comme les deux callbacks à survoler, puisqu'ils sont exactement les mêmes :)

1
jbabey

Si quelqu'un veut essayer la même chose sur les liens de menu, (texte d'une autre langue en survol) Voici l'exemple jsfiddle

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

Une autre façon de procéder consiste à créer deux étendues avec le bouton et à avoir des classes pour chaque étendue. 

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

Laissez le second vide, et dans css, écrivez:

button{ 
  //your decorative code here }

button:hover .replies{
   display: none; }

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

Cela ressemble à la première réponse, mais cette réponse ne fonctionne pas toujours avec un pré-processeur tel que SASS ou MOINS.

1
dickinsonk9

Aussi simple que cela puisse être: 

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

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

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

}, function() {

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