如何在悬停时更改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></span>

Answer 2

这完全可以使用伪元素的CSS来完成，不需要JavaScript。

.icon:before {
    content: '×';
}

.icon:hover:before {
    content: '♥';
}

<span class="icon"></span>

Answer 3

您正在寻找onmouseover事件-别忘了在移开鼠标后将其更改回去。

var span = document.querySelector('span');
span.onmouseover = ()=>span.innerHTML = '♥';
span.onmouseout = ()=>span.innerHTML = '×';

<span>&times;</span>

Answer 4

您必须使用Javascript的mouseenter和mouseout事件，并将它们作为事件侦听器附加到范围。然后，在事件侦听器内部，更改节点的文本内容。

Answer 5

您可以通过事件更改背景颜色和所需的颜色。 请参考：Change the color of span on hover