导航栏用户名悬停切换为积分时，新文本短于原文本出现闪烁问题

这个闪烁问题的根源很明确：当你用innerHTML替换文本后，元素的宽度会跟着内容长度变化——如果积分文本比原用户名短，元素宽度缩小，导致鼠标瞬间“移出”了元素，触发mouseout事件切回用户名，宽度又变大，鼠标再次“进入”元素触发mouseover，如此循环就出现了闪烁。

下面给你两种靠谱的解决思路：

方法1：固定元素宽度 #

给承载用户名/积分的<a>标签设置固定最小宽度，确保不管内容长短，元素的可交互区域大小不变，鼠标不会因为宽度变化意外触发事件。

首先添加CSS样式：

.nav-user-item a {
  display: inline-block; /* 让宽度属性生效 */
  min-width: 150px; /* 数值根据你最长的用户名长度调整 */
  text-align: center; /* 可选，让文本居中更美观 */
  padding: 0 8px; /* 可选，增加内边距避免文本贴边 */
}

然后修改你的HTML代码（顺便加上htmlspecialchars防止XSS风险，这个很重要！）：

<li class="nav-user-item">
  <a onmouseover="this.innerHTML='<?php echo htmlspecialchars($row['points'] . " POINTS"); ?>';" 
     onmouseout="this.innerHTML='<?php echo htmlspecialchars($_SESSION['username']); ?>';">
    <?php echo htmlspecialchars($_SESSION['username']); ?>
  </a>
</li>
<li><a href="logout.php">Logout</a></li>

方法2：用CSS切换双元素显示（更优雅） #

放弃JS替换innerHTML的方式，在<a>标签里嵌套两个<span>，分别存放用户名和积分，通过CSS的:hover伪类控制显示隐藏。这种方式完全不需要JS，元素宽度会自动适应最长的内容，从根源避免闪烁问题。

HTML代码：

<li>
  <a class="nav-user-link" href="#">
    <span class="user-text"><?php echo htmlspecialchars($_SESSION['username']); ?></span>
    <span class="points-text"><?php echo htmlspecialchars($row['points'] . " POINTS"); ?></span>
  </a>
</li>
<li><a href="logout.php">Logout</a></li>

对应的CSS：

.nav-user-link {
  display: inline-block;
}
/* 默认隐藏积分文本 */
.nav-user-link .points-text {
  display: none;
}
/* 悬停时隐藏用户名，显示积分 */
.nav-user-link:hover .user-text {
  display: none;
}
.nav-user-link:hover .points-text {
  display: inline;
}

两种方法里更推荐第二种，不仅解决了闪烁问题，代码结构更清晰，还避免了JS操作DOM可能带来的其他潜在问题，同时安全性也更高。

内容的提问来源于stack exchange，提问作者D.re48