Question

Y！我从自己的脑海中制作了这个标题（可能不是一个好主意），并添加了一个悬停在图标旁边的小方框。然后，当我将鼠标悬停在其上方时，整个标头在过渡运行时会稍有晃动，然后又返回并保持这种状态。但是我不希望这种不稳定的效果，所以如果有人想帮助我，将不胜感激^^

.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

我在这里看不到任何错误。可能是因为浏览器。您正在使用哪种浏览器。您尝试使用其他的吗？在那里也一样吗？

Answer 2

问题发生在Safari上。并如意见所述。不要使用中心。而是使用flexbox或grid。

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

我的标题在按钮悬停效果上发抖

2 个答案: