Question

我希望产生一种效果，当其中一个链接悬停时，它会从其他链接抬起，而不会影响导航栏中其他链接的位置。但到目前为止，我还没有能够实现这一点，当其中一个徘徊时，其他链接会向下移动。

指向codepen的链接：http://codepen.io/anon/pen/gbxbJQ

＆＃13;

#nav1 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  list-style: none;
}
tr > td {
  font-size: 24pt;
  padding-left: 50px;
}
a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:hover {
  display: block;
  padding-bottom: 70px;
}

＆＃13;

<div>
  <table id="nav1">
    <tr>
      <td><a href="#">C</a></td>
      <td><a href="#">D</a></td>
      <td><a href="#">E</a></td>
      <td><a href="#">F</a></td>
      <td><a href="#">G</a></td>
      <td><a href="#">A</a></td>
      <td><a href="#">B</a></td>
    </tr>
  </table>
</div>

＆＃13;

Answer 1

如果使用相对定位并略微改变位置（例如下面的示例，它向上移动5px），它可能会好一点。

#nav1 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  list-style: none;
}
tr > td {
  font-size: 24pt;
  padding-left: 50px;
}
a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:hover {
  display: block;
  position:relative;
  top:-5px;
}

<div>
  <table id="nav1">
    <tr>
      <td><a href="#">C</a></td>
      <td><a href="#">D</a></td>
      <td><a href="#">E</a></td>
      <td><a href="#">F</a></td>
      <td><a href="#">G</a></td>
      <td><a href="#">A</a></td>
      <td><a href="#">B</a></td>
    </tr>
  </table>
</div>

Answer 2

使你的tds固定宽度，你的桌子位置相对，你的链接绝对定位。在悬停时，使锚点顶部-70px并添加70px的填充底部。看看这个：

#nav1 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  list-style:none;
  position:relative;
}
td {
   width:40px;
}
a:hover {
    display: block;
    position:absolute;
    top:-70px;
    padding-bottom:70px
}

http://codepen.io/anon/pen/azyOdL

如何在导航栏中引发特定链接而不影响其他链接

2 个答案: