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

Linda Hamilton

发布： 2024-12-15 17:35:17

原创

589 人浏览过

How Can I Prevent Element Shifting on Hover When Adding a CSS Border?

避免在悬停时使用 CSS 边框移动元素

将悬停边框应用于元素时，您可能会遇到移动效果，因为添加的边框宽度将元素推出。为了在保持边框的同时防止这种情况发生，您可以采用以下技术：

解决方案

要确保元素保持在其原始位置，请将边框设置为透明默认情况下，仅使其在悬停时可见：

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

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

登录后复制

此方法允许边框存在而不影响元素的位置，从而创建所需的视觉效果没有任何不必要的动作。

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

来源：php.cn

本站声明

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

作者最新文章