如何修复悬停的精度？

Question

是否可以让鼠标悬停时底部菜单更加精确？在 Firefox 上它可以完美运行，但在其他浏览器上却不行。如果您浏览数字，那不是 "snappy"，我想解决这个问题。不幸的是，我不知所措。

我试过使用 z-index，但没用。

<div id="projects">
    <ul>
      <li>
        <a data-project="1" href="cirqleui.html">01</a>
      </li>
      <li>
        <a data-project="2" href="./complexplayingcards/">02</a>
      </li>
      <li>
        <a data-project="3" href="./virtualmirror/">03</a>
      </li>
      <li>
        <a data-project="4" href="./transparentdonation/">04</a>
      </li>
      <li>
        <a data-project="5" href="./sounzer/">05</a>
      </li>
      <li>
        <a data-project="6" href="./smox/">06</a>
      </li>
      <li>
        <a data-project="7" href="./colro/">07</a>
      </li>
    </ul>
  </div>

#projects {
    left: 0;
    top: 100%;
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding: 25px 0 0 25px;
    position: fixed;
    z-index: 3;
    font-size: 7vw;
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -2px;
    background-color: transparent;
  }


  #projects ul {
    margin: 0;
    padding: 0;
    border: 0;
  }

  #projects li {
    list-style: none;
  }

  #projects a{
    color: black;
    transition: all .1s ease-in-out;

  }

  #projects a:hover{
    transition: all .1s ease-in-out;
    font-size: 300px;
  }

总的来说，它在滑过数字时必须更加敏捷。

Answer 1

您唯一缺少的是 li 标签上的 overflow: hidden; 和 a 标签上的 line-height: 1;。参见：https://jsfiddle.net/eakz5d6c/

如何修复悬停的精度？

How to fix the precision on hover?

html

css

scale

hover