I have a system of comments, and each comment has a button that normally displays the number of replies to it. I want that when a user hovers over the button, the text changes from "3 replies" to "Reply!", and then, when the mouse leaves the button, the text returns to "3 replies".
Because the number of replies varies for each comment, I cannot do a simple mouseover/mouseout script. One way to go around it would be to pass the number of replies as a variable, and make a small function to take care of it. But there must be a simpler way. I tried using the :hover thing in css to change the content of the tag (with the css property content), but no luck yet.
Any help appreciated, thanks!
29 Answers
Yes, you can use CSS content. To switch between the normal text and "Reply!", put the normal text in a span and hide that when hovering.
button { width: 6em
}
button:hover span { display: none
}
button:hover:before { content: "Reply!"
}<button><span>3 replies</span></button>Edit: this works in IE8, but not in its compatibility mode, so I assume IE7 is out. Would that be a problem?
2I think this would be a straightforward way to go for it. Use two span inside your button, one with content 'x replies', one with content 'Reply!'. Using CSS and :hover, you just switch which span is shown on hover.
button .comment { display: none;
}
button:hover .replies { display: none;
}
button:hover .comment { display: inline;
}<button> <span>5 Replies</span> <span>Reply!</span>
</button>This works just fine in about everything, as it uses very basic things to achieve an equally basic goal.
2I would use a combination of jQuery .hover() and jQuery .data():
HTML:
<div>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: feel free to refactor the anonymous function used as the two callbacks to hover, since they are exactly the same :)
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'); } }); }
);I think you could use this kind of function, when you stop hovering, you feed the ajax call your comment id, and it returns the # of replies for that comment. You can decide how you want to store/retrieve your comment ID.
6Another way to do it, is to create two spans with the button, and have classes for each span.
<button> <span>3 Replies</span> <span></span>
<button>Leave the second one empty, and in css, write:
button{ //your decorative code here }
button:hover .replies{ display: none; }
button:hover .comments:before{ content:"Reply!"; }This is similar to first answer, but that answer doesn't always work with a preprocessor like SASS, or LESS.
In modern browsers you could also use :after pseudo element for changing the text on hover.
.label { width:5em }
.label:after { content:'Hello'; }
.label:hover:after { content:'World'; }<button></button>If anyone wants to try the same on menu links, (different language text on hover):
span { font-size: 12px;
}
a { color: green;
}
a:hover span { display: none;
}
a:hover:before { color: red; font-size: 24px; content: "ಕನ್ನಡ";
}<a align="center" href="#"><span>kannada</span></a>As simple as it might be:
$('.controls button.filter').hover(function(){ var original = $('#current_filter').text(); var descr = $(this).attr("title"); $('#current_filter').html( descr );
}, function() { $('#current_filter').text(original);
});It's better to change the content in Html.
.contact .contact-number { opacity: 0; position: absolute; transition-duration: .3s;
}
.contact:hover .contact-text { opacity: 0; transition-duration: .3s;
}
.contact:hover .contact-number { opacity: 1; transition-duration: .3s;
}
.contact-number,
.contact-text { position: absolute; left: 18px; top: 15px;
}<div> <span>contact us</span> <span>9981010848</span>
</div>
