是的，你可以使用CSS content。要在普通文本和"回复!"之间切换，请将普通文本放在span中，并在悬停时隐藏它。

button {
  width: 6em
}

button:hover span {
  display: none
}

button:hover:before {
  content: "Reply!"
}

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

编辑：这在ie8下可以工作，但在它的兼容模式下不行，所以我假设ie7已经过时了。这会有问题吗？

我认为这是一个简单的方法。在你的按钮中使用两个范围，一个是内容'x replies'，一个是内容'Reply!'。使用CSS和：hover，你可以切换哪个范围显示在悬停状态。

button .comment {
  display: none;
}

button:hover .replies {
  display: none;
}

button:hover .comment {
  display: inline;
}

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

这在任何事情上都很有效，因为它使用非常基本的东西来实现同样基本的目标。

我将使用jQuery .hover()和jQuery .data():的组合
http://jsfiddle.net/5W4Bd/
超文本：

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

浏览器：

$('#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：可以随意重构用作两个hover回调的匿名函数，因为它们完全相同：）

$('#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。

另一种方法是使用按钮创建两个范围，并为每个范围创建类。

<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或LESS这样的预处理器。

在现代浏览器中，你也可以使用**：after**伪元素来改变悬停时的文本。

.label             { width:5em }
.label:after       { content:'Hello'; }
.label:hover:after { content:'World'; }

<button class="label"></button>

如果有人想在菜单链接上尝试相同的操作，（悬停时的不同语言文本）：

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>

可能很简单：

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

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

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

}, function() {

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

最好改变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 class="contact">
  <span class="contact-text">contact us</span>
  <span class="contact-number">9981010848</span>
</div>