时间戳

首页 > 解决方案 > 如何在悬停时更改 html 元素文本

javascript - 如何在悬停时更改 html 元素文本

问题描述

我有一个<span>包含一些文本的元素，即&times;. 如何让它在悬停时更改为不同的符号。例如，到：&infin;？

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

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

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

标签： javascripthtmlcss

解决方案

您可以在不使用 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>

推荐阅读