Question

我有一个我尝试制作动画的页面。现在发生的事情是，当页面加载时，标题会淡入并向上移动。之后，每次用户将鼠标悬停在按钮上时，按钮都会改变颜色和高度。问题是每次按钮改变高度时，它上面的文本（标题）也会向上移动。我该如何防止这种情况发生？

除了提供解决方案之外，任何有关删除冗余代码或其他样式提示的提示都将受到赞赏。

＆＃13;

.nav-button {
  width: auto;
  font-size: 0.6em;
  padding: 1%;
  font-family: 'Raleway', sans-serif;
  border: 0.1em solid;
  border-color: transparent;
  border-radius: 3%;
  cursor: pointer;
  opacity: 0.8;
  height: 1.7em;
}
    
#apply-button {
  background-color: #28A55C;
  transition: background-color 0.3s ease-in-out;
  transition-delay: 0.2s;
  transition: height 0.3s ease-in-out;
}
    
#apply-button:hover {
  background-color: #DF1C40;
  height: 2.4em;
}
    
#about-button {
  background-color: #97BBDD;
  transition: background-color 0.3s ease;
  transition-delay: 0.2s;
  transition: height 0.3s ease-in-out;
}
    
#about-button:hover {
  background-color: #DF1C40;
  height: 2.4em;
}
    
#sponsor-button {
  background-color: #FF9D28;
  transition: background-color 0.3s ease;
  transition-delay: 0.2s;
  transition: height 0.3s ease-in-out;
}
    
#sponsor-button:hover {
  background-color: #DF1C40;
  height: 2.4em;
}

＆＃13;

<!-- intro page -->
<div id="splash" tabindex='1'>
    <div id="header">
        <div id="title">
            <strong>DubsTech</strong>
            <br>
            Students teaching Students
            <br>
        </div>
        <button class="nav-button" id="apply-button">Apply!</button>
        <button class="nav-button" id="about-button">About</button>
        <button class="nav-button" id="sponsor-button">Sponsor</button>
    </div>
</div>

＆＃13;

Answer 1

这是因为所有三个按钮都是＆＃34;标题＆＃34;的兄弟元素。元件。任何布局更改都会使其共同的父元素＆＃34;＃header＆＃34;变化。一种解决方案是使用另一个包装器＆＃34; div＆＃34;包装所有这些按钮并设置此包装器＆＃34; height：2.4em＆＃34;因此按钮的高度转换不会影响＆＃34; title＆＃34;。

在按钮改变高度后使标题保持不变

1 个答案: