如何在悬停时更改HTML元素文本

Question

我有一个<span>包含一些文本的元素，即×。如何在悬停时将其更改为其他符号。例如，要：∞？

<span class="change-text">&times;</span>

将鼠标悬停在上方时，访问者应该看到：

<span class="change-text">&infin;</span>

Answer 1

您可以在不使用JavaScript的情况下解决此问题。

在HTML代码中只需将空跨度设置为：

<span></span>

在css中添加：

span::after {
    content: '\00d7';
}
span:hover::after {
    content: '\221E';
}

\00d7，\221E表示符号unicode。

span::after {
    content: '\00d7';
}
span:hover::after {
    content: '\221E';
}

span:after { 
  content: '\00d7'
}
span:hover:after{
  content: '\221E'
}