Question

我有一个带有用户名的简单导航栏，当鼠标悬停在用户名上时，它会变为用户拥有的点数。

<li>
    <a onmouseover="this.innerHTML='<?php echo $row['points'] . " POINTS" ?>';" 
       onmouseout="this.innerHTML='<?php echo $_SESSION['username'] ?>';">
  /*Default*/     <?php echo $_SESSION['username'] ?></a>

</li>

              <li><a href="logout.php">Logout</a></li>

这非常好用，但是如果用户名长于点的ammout，则当它悬停在文本的边缘时会开始闪烁。

这是我的解决方案：

 <li onmouseover="document.getElementById('pts').style.display='inline-block';document.getElementById('name').style.visibility='hidden';"
     onmouseout="document.getElementById('pts').style.display='none';document.getElementById('name').style.visibility='visible';">

     <div style="position:relative;"><a id=pts style="display: none;position:absolute;";><?php echo $row['points'] . " POINTS" ?></a><a id=name><?php echo $_SESSION['username'] ?></a></div></li>

<li><a href="logout.php">Logout</a></li>

现在这解决了我的第一个问题，但是现在如果NAME比点数少，则这些点不适合div并创建2行文本。

我认为我需要做的是让条件if Name is shorter，做第一个代码，if name is longer做第二个代码吗？

或者有更好的方法吗？

如果新文本比原始文本短，则onmouseover闪烁

0 个答案: