jQuery鼠标事件触发时变量异常致段落颜色无法正常切换问题

嘿，我一眼就看出问题所在了——你每次触发mouseover/mouseleave事件时都重新读取了页面标题，这就导致如果页面标题在事件触发期间被动态修改（比如某些脚本更新了document.title），你的判断逻辑就会出错，最终鼠标移开后段落还保持红色。

核心解决思路是：只在页面初始化时获取一次页面标题，把它存在变量里复用，而不是每次事件触发都重新读取。这样我们判断的是页面加载时的原始标题，完全符合你“首页标题为home时保持红色”的需求。

原生JavaScript实现 #

// 初始化阶段仅获取一次页面标题，转小写避免大小写匹配问题
const currentTitle = document.title.trim().toLowerCase();

// 选中目标段落元素（根据你的实际DOM结构调整选择器）
const targetParagraph = document.querySelector('p');

targetParagraph.addEventListener('mouseover', function() {
  this.style.color = 'red';
});

targetParagraph.addEventListener('mouseleave', function() {
  // 用预先存储的标题做判断，而非实时读取document.title
  if (currentTitle !== 'home') {
    this.style.color = 'black';
  }
});

jQuery版本实现（如果你用的是jQuery） #

// 同样初始化时只获取一次标题
const currentTitle = document.title.trim().toLowerCase();

$('p').mouseover(function() {
  $(this).css('color', 'red');
}).mouseleave(function() {
  if (currentTitle !== 'home') {
    $(this).css('color', 'black');
  }
});

额外提示 #

我加了.trim().toLowerCase()是为了避免大小写或者首尾空格导致的匹配失败（比如页面标题是Home或者HOME），如果你的标题是严格的小写home，这两步可以省略，但加上会让代码更健壮。

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