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

Question

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

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

任何帮助表示感谢,谢谢!

Answer 1

是的,你可以使用CSS content.要在普通文本和"回复!"之间切换,请将普通文本放入a 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示例.这对于所有事情都很好,因为它使用非常基本的东西来实现同样的基本目标.