悬停时导航栏链接移动答案

【问题标题】：navigation bar links move when hover悬停时导航栏链接移动
【发布时间】：2015-05-24 10:47:46
【问题描述】：

在我的 html 页面中，导航链接上的悬停操作有以下内容。

<td class="menuNormal"
    onmouseover="expand(this);"
    onmouseout="collapse(this);"
    width="130"
    align="left">
  <p><b>Vida de Mulher</b></p>
  <div class="menuNormal">
    <table class="menu" width="130">
      <tr>
        <!-- ... -->

这是用于悬停动作的 CSS 样式表：

table.navbar {
    font-size: 12pt;
    margin: 0px;
    padding: 0px; 
    border: 0px; 
}

table.menu {
    font-size: 11pt;
    margin: 5px;
    padding: 0px;
}

td.menuNormal {
    padding: 0px;
    color: #003399;
    vertical-align: top;
    background-color: #f6f6f6;
}

td.menuHover {
    padding: 0px;
    color: #003399;
    width: 112px;
    vertical-align: top;
    background-color: lightblue;
}

【问题讨论】：

您的问题是什么？您的目标是什么？
请更具体.......
我们还能看到你的代码更大的 sn-p，你能确认你是否使用 JQuery，如果是，是什么版本？

标签： css hyperlink hover move

【解决方案1】：

这可能是由您的 css 中的 :hover 效果引起的，或者可能在您的 html 代码中删除 td 类 .menuNormal 的宽度将删除此移动效果，在最后一种情况下，如果这些都不起作用，我建议添加与td.menuHover 的宽度相同，假设创建此类是为了在您的td 上实现一些悬停效果

td.menuHover {
    padding: 0px;
    color: #003399;
    width: 130px; /* changing this value for the same as .menuNormal */
    vertical-align: top;
    background-color: lightblue;
}

【讨论】：