css - 悬停时调整 CSS 文本大小会导致同级元素移动
问题描述
我有这段代码,这些元素一起存在于这个页面的标题中。当H1#name
拍摄的悬停效果影响主页按钮时,会稍微向右移动。这是因为显示弯曲吗?或者我可以做些什么来让这个主页按钮在悬停效果发生时保持不动?到目前为止,我已经尝试了几种定位方法,但都没有奏效。
#info-header {
background-color: dimgrey;
height: 5rem;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
font-size: 3rem;
}
#name {
color: mistyrose;
font-family: 'Monoton', cursive;
}
#name:hover {
font-family: 'Monoton', cursive;
text-transform: uppercase;
transform: scale(1.15);
transition: 1.75s;
}
a {
text-decoration: none;
color: mistyrose;
}
a:hover {
color: black;
opacity: 10%;
}
#home-button {
height: 2.25rem;
border-radius: 5%;
font-weight: 900;
cursor: pointer;
background-color: black;
}
#home-button:hover {
background-color: mistyrose;
transition: 1.25s;
}
<header id="info-header">
<h1 id="name">Name</h1>
<button id="home-button"><a href="index.html">Home</a></button>
</header>
解决方案
为 h1#name 添加固定宽度解决了这个问题。
推荐阅读
- angular - 如何解决角度中的跳过位置更改问题
- cdn - 配置 Akamai 以单独缓存下一代图像
- reactjs - 使用 prevState 更新状态,但当来自父级的道具发生变化时
- angular - Angular 8如何在三个组件之间传递数据
- c# - Xamarin.Android - RSACryptoServiceProvider CspParameters 为 null 并且 CryptoKeySecurity 为 null 使用 X509Certificate2
- javascript - Angular 7:使用 Rxjs observbles 时的 ExpressionChangedAfterItHasBeenCheckedError
- php - 我在 SteamAuth.php 第 206 行收到“ErrorException:未定义偏移量:1”
- ffmpeg - 在 ffplay 中获得绿屏:使用 Live555 通过 RTP 流将桌面(DirectX 表面)流式传输为 H264 视频
- javascript - 带有 AdminSdk 和 RealtimeDatabase 的 Firebase 功能不起作用
- java - 为什么 try-catch-finally 不重新提示用户?