如何通过JS DOM修改鼠标悬停时变量显示文本的颜色？

你现有代码已经完成了DOM元素绑定、文本渲染和事件绑定逻辑，只需要补全对应的两个事件处理函数即可，以下是具体实现：

方案1：纯CSS实现（无额外JS代码，最推荐） #

如果仅需修改悬停样式不需要执行其他JS逻辑，直接用CSS伪类即可，不用写JS函数，还可以删掉HTML标签上的onmouseover和onmouseout属性：

.text_user_info:hover {
  /* 自定义悬停颜色 */
  color: #ff0000;
}

方案2：JS操作样式实现 #

如果你需要在悬停时同时执行其他JS逻辑，用以下写法即可：

完整JS代码 #

var userName = "Hamdy"
var userNamef = userName.bold()
const welcome = "Hello,  "
// 提前获取DOM元素，避免多次查询
const textDom = document.getElementById("tui")

// 渲染初始文本
textDom.innerHTML = welcome + userNamef;

// 鼠标悬停触发函数
function hoverText() {
  textDom.style.color = "#ff0000";
}

// 鼠标移出触发函数
function noHoverText() {
  // 恢复为默认文本颜色
  textDom.style.color = "#000000";
}

方案3：JS加CSS类控制（易扩展） #

如果后续可能新增更多悬停样式（如下划线、背景色等），推荐用切换CSS类的方式实现，后续修改样式不用调整JS逻辑：

1. 先加CSS样式：

.text--hover {
  color: #ff0000;
  text-decoration: underline;
}

2. 对应JS代码：

var userName = "Hamdy"
var userNamef = userName.bold()
const welcome = "Hello,  "
const textDom = document.getElementById("tui")

textDom.innerHTML = welcome + userNamef;

function hoverText() {
  textDom.classList.add("text--hover");
}

function noHoverText() {
  textDom.classList.remove("text--hover");
}

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