html - 我的标题在按钮悬停效果时摇晃

Question

哟!我根据自己的想法制作了这个标题(开始时可能不是一个好主意)并添加了一个小框，当悬停在图标上时会出现在图标旁边。当我将鼠标悬停在它上面时，整个标题会在转换运行时稍微摇晃一下，然后它会回来并保持这种状态。但是我不想要那种摇摇欲坠的效果，所以如果有人愿意帮助我，我将不胜感激^^

.header {
  float: left;
  width: 10vh;
  height: 100vh;
  border-right: 0.3vh solid #272727;
  box-shadow: 0.25vh 0.25vh 0.5vh #888;
  z-index: 1;
}

.header .buttons {
  transform: translateY(500%);
  text-align: center;
  display: inline-block;
}

.header .buttons button {
  cursor: pointer;
  width: 8vh;
  height: 8vh;
  background: transparent;
  border: none;
}

.header .buttons button svg {
  width: 5vh;
  fill: #fff;
}

.header .buttons button .hover-box {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10vh) translateY(-5.5vh);
  background: #272727;
  border-bottom: 3px solid #000;
  box-shadow: 0.25vh 0.25vh 0.5vh #888;
  width: 10vh;
  height: 5vh;
  z-index: -1;
  transition: 0.2s;
}

.header .buttons button .hover-box p {
  font-size: 0.9vw;
  color: #fff;
  transform: translateY(60%);
}

.header .buttons button:hover .hover-box {
  opacity: 1;
  pointer-events: all;
  transform: translateX(12vh) translateY(-5.5vh);
}

<div class="header">
        <center>
            <div class="buttons">
                <a href="#"><button>
                    <svg height="5vh" viewBox="0 -16 512 512" width="5vh" xmlns="http://www.w3.org/2000/svg"><path style="fill: #272727" d="m497 269.988281h-136v-75c0-8.28125-6.714844-15-15-15h-75v-75c0-8.28125-6.714844-14.988281-15-14.988281h-75v-75.011719c0-8.28125-6.714844-14.988281-15-14.988281h-151c-8.285156 0-15 6.707031-15 14.988281v450c0 8.285157 6.714844 15 15 15h482c8.285156 0 15-6.714843 15-15v-180c0-8.28125-6.714844-15-15-15zm-15 90h-61v-60h61zm-91-60v60h-120v-60zm-361 60v-60h61v60zm0-90v-60h121v60zm0-90v-60h61v60zm91 120h120v60h-120zm210 90v60h-150v-60zm0-180v60h-150v-60zm-90-90v60h-120v-60zm-90-90v60.011719h-121v-60.011719zm-121 360h121v60h-121zm331 60v-60h121v60zm0 0"/></svg>
                    <div class="hover-box">
                        <p>The Wall</p>
                    </div>
                </button></a>
            </div>
        </center>
    </div>

Answer 1

问题出现在 Safari 上。正如评论所建议的那样。不要使用中心。而是使用 flexbox 或网格。

因此删除中心标签可以解决您的问题。