我 有 一 个 导航 栏 ， 我 做 了 网格 ， 我 试图 添加 一 个 悬停 样式 的 变化 ， 使 选定 的 列 扩大 ， 以 填补 视图 宽度 ， 而 不是 推动 其余 列 的 一边 。
下面 是 我 的 html ：

<nav class="sticky">
    <div class="colorblock1">home</div>
    <div class="colorblock2">about us</div>
    <div class="colorblock3">twitter</div>
    <div class="colorblock4">instagram</div>
    <div class="colorblock5">more...</div>
  </nav>

中 的 每 一 个
和 我 CSS ：

.sticky {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: sticky;
  top: 0;
  overflow: hidden;
}

.sticky > div {
  width: auto;
}

.sticky > div:hover {
  width: 100vw;
}

格式
例如 ， 我 试图 获得 的 行为 是 ， 如果 用户 悬停 在 第 三 列 （ twitter ） 上 ， 该 列 将 跨越 两侧 的 视口 边缘 ， 越过 其他 列 （ 而 不是 像 当前 所 做 的 那样 将 它们 推 过去 ） 。
悬停 列 右边 的 那些 不是 问题 ， 因为 它们 对 overflow:hidden; 是 隐藏 的 ， 但 左边 的 那些 仍然 停留 在 边缘 。

我 尝试 过 将 div 的 位置 设置 为 绝对 ， 但是 当 我 开始 使用 宽度 制作 动画 时 ， 特别 是 使用 中间 列 以外 的 列 时 ， 这 会 导致 问题 。
我 如何 将 这些 列 从 屏幕 上 推 掉 ， 或者 让 悬停 的 列 忽略 网格 ， 并 完全 跨越 其他 列 ？