如何解决弹性盒悬停移动
每当我将鼠标悬停在文本上方时,我都希望它具有底部边框。但是,我也使文字向上移动。也许有什么建议吗?图像before的位置不正确,图像after抬高了一点。我知道您无法从屏幕截图中看到它。但是,我不知道如何上传视频。
.pages {
width: 370px;
font-family: 'Heebo',sans-serif;
font-size: 18.5px;
display: inline-flex;
flex-direction: row;
margin: auto 0px auto 0px;
justify-content: space-between;
padding: 0px 24px 22px 0px;
}
.pages :hover {
cursor: pointer;
border-bottom: 1px solid black;
padding-bottom: 1px;
}
<div class="pages">
<a id="Gallery">Gallery Walls</a>
<a id="Contact">Contact</a>
<i class="fab fa-instagram" id="icon"></i>
<i class="fas fa-store" id="icon"></i>
</div>
解决方法
该元素之所以移动,是因为您要在悬停时添加填充和边框,从而更改了元素的大小。与其在边框上添加边框,不如为元素添加边框(和填充),然后只需将边框的颜色从透明更改为您选择的颜色即可。
例如:
.pages > * {
border-bottom: 1px solid transparent;
padding-bottom: 1px;
}
.pages > :hover {
border-bottom-color: black;
}
请注意,子组合器(>
)在当前的HTML结构中不是必需的,但是在将子元素添加到任何a
或i
元素中时很有用。另外,您可以给pages
的每个孩子使用相同的class
(例如page-link
),并在此处使用它。
您需要添加默认的透明边框或边距/填充以启动,以便浏览器在定位时计算该总高度。您在悬停时要做的就是更改边框样式和颜色,以使整体高度相同。
示例:
.pages {
width: 370px;
font-family: 'Heebo',sans-serif;
font-size: 18.5px;
display: inline-flex;
flex-direction: row;
margin: auto 0px auto 0px;
justify-content: space-between;
padding: 0px 24px 22px 0px;
border-bottom: 1px solid transparent;
}
.pages :hover {
cursor: pointer;
border-bottom: 1px solid black;
padding-bottom: 1px;
}
<div class="pages">
<a id="Gallery">Gallery Walls</a>
<a id="Contact">Contact</a>
<i class="fab fa-instagram" id="icon"></i>
<i class="fas fa-store" id="icon"></i>
</div>
,
这是因为您在悬停时给了底部填充1px
.pages {
width: 370px;
font-family: 'Heebo',sans-serif;
font-size: 18.5px;
display: inline-flex;
flex-direction: row;
margin: auto 0px auto 0px;
justify-content: space-between;
padding: 0px 24px 22px 0px;
}
.pages :hover {
cursor: pointer;
border-bottom: 1px solid black;
}
<div class="pages">
<a id="Gallery">Gallery Walls</a>
<a id="Contact">Contact</a>
<i class="fab fa-instagram" id="icon"></i>
<i class="fas fa-store" id="icon"></i>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。