Question

我有一个评论系统，每个评论都有一个按钮，通常会显示回复的数量。我希望当用户将鼠标悬停在按钮上时，文本会从“3个回复”变为“回复！”，然后，当鼠标离开按钮时，文本将返回“3个回复”。

因为每个评论的回复数量各不相同，所以我无法做一个简单的鼠标悬停/鼠标滚动脚本。绕过它的一种方法是将回复的数量作为变量传递，并制作一个小函数来处理它。但必须有一个更简单的方法。我尝试在css中使用：hover thing来改变标签的内容（使用css属性内容），但还没有运气。

感谢任何帮助，谢谢！

Answer 1

是的，您可以使用CSS content。要在普通文本和“回复！”之间切换，请将普通文本放在span中，并在悬停时将其隐藏。

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/

编辑：这适用于IE8，但不适用于兼容模式，所以我假设IE7已经用完了。这会有问题吗？

Answer 2

我认为这将是一种直截了当的方式。在按钮内使用两个跨度，一个内容为“x回复”，另一个内容为“回复！”。使用CSS和：悬停，您只需切换悬停时显示的跨度。

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

检查JsFiddle示例。这对于所有事情都很好，因为它使用非常基本的东西来实现同样的基本目标。

Answer 3

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

Answer 4

我会结合使用jQuery .hover()和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);
    });

编辑：随意重构用作悬停的两个回调的匿名函数，因为它们完全相同：）

Answer 5

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

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

Answer 6

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

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

Answer 7

尽可能简单：

boolean[] isNotPrime = new boolean[MAX + 1];
// we know 2 is prime, it's enough to look at the odd numbers
primes.add(2); // list of primes
for (int i = 3; i < isNotPrime.length; i += 2) {
  if (isNotPrime[i])
    continue;
  primes.add(i);
  for (int j = 3 * i; j < isNotPrime.length; j += 2 * i)
    isNotPrime[j] = true;
}

Answer 8

在现代浏览器中，您还可以使用：after 伪元素来更改悬停时的文本。

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

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

在悬停时更改文本，然后返回上一个文本

8 个答案: