添加悬停触发的 CSS 边框时如何防止元素移动？

Linda Hamilton

发布： 2024-12-17 20:17:10

原创

869 人浏览过

How to Prevent Element Shift When Adding Hover-Triggered CSS Borders?

避免使用悬停触发的 CSS 边框进行元素移动

您在悬停时向行添加背景突出显示，但注意到不需要的内容由额外的 1px 边框引起的移动。在不借助背景图像的情况下，如何补偿这种位移？

解决方案：

为了防止元素移动，可以将边框设置为透明。这样，边框仍然存在但不可见，从而消除了对元素的任何潜在推动。

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

登录后复制

此修改可确保悬停效果保持其预期行为，而不会破坏元素的位置。

以上是添加悬停触发的 CSS 边框时如何防止元素移动？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章