使用JavaScript替换文本：新增元素后Hover效果失效问题

问题根源 #

1. 重复ID导致样式失效：HTML中两个容器都使用了id="Can"，ID在文档中必须唯一，浏览器只会解析第一个匹配的ID，第二个容器的hover样式无法生效。
2. 无效CSS属性：display: show不是合法的CSS值，虽然测试环境可能兼容，但部分浏览器会忽略该属性，导致hover时文本显示异常。
3. JS选择器局限：querySelector仅返回第一个匹配元素，若新增元素的目标节点在文档后方，可能无法被正确选中赋值。

修正后的完整代码 #

HTML（使用类代替重复ID）

<div class="can-container">
  <p style="font-family: verdana; margin-left: 1.25em; font-size: 1.25rem; font-weight: 700;">
    <span class="original-text">This Is Some Text</span>
    <span class="hover-text" id="p3"></span>
  </p>
</div>
<div class="can-container">
  <p style="font-family: verdana; margin-left: 1.25em; font-size: 1.25rem; font-weight: 700;">
    <span class="original-text">This Is Some Text</span>
    <span class="hover-text" id="Canc"></span>
  </p>
</div>

CSS（统一有效属性，用类选择器批量控制）

/* 默认状态：显示原始文本，隐藏hover文本 */
.can-container .original-text {
  display: inline;
}
.can-container .hover-text {
  display: none;
}

/* hover状态：切换显示，应用渐变文本样式 */
.can-container:hover .original-text {
  display: none;
}
.can-container:hover .hover-text {
  display: inline;
  background: linear-gradient(blue, yellow);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-transform: uppercase;
}

JS（确保每个目标元素都被正确赋值）

// 为第一个hover文本设置内容
document.querySelector('#p3').textContent = "Hello World";
// 为第二个hover文本设置内容
document.querySelector('#Canc').textContent = '!! No Meeting !!';

关键修改说明 #

• 用类can-container替代重复ID，保证所有容器都能继承hover样式。
• 移除无效的display: show，使用标准的inline/none控制元素显示状态。
• 保留hover文本的唯一ID，确保JS能精准定位每个元素完成赋值。

内容的提问来源于stack exchange，提问作者Andy