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

Making title stay put after buttons change height

本文关键字：标题 按钮 改变 高度      更新时间：2023-09-26

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

除了给出解决方案外，任何关于删除多余代码的提示或其他风格提示都将不胜感激。

.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;
}
<!-- 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>

这是因为这三个按钮都是"title"元素的兄弟元素。任何布局更改都会更改其公共父元素"#header"。一种解决方案是使用另一个包装器"div"来包装所有这些按钮，并将该包装器设置为"height:2.4em"，这样按钮的高度转换就不会影响"title"。

相关文章：