首页 > web前端 > css教程 > 如何防止元素在悬停时移动边框?

如何防止元素在悬停时移动边框?

Susan Sarandon
发布: 2024-12-20 17:27:22
原创
943 人浏览过

How to Prevent Element Shifting on Hover with a Border?

悬停边框导致元素轻微调整

问题:

具有悬停事件的无序锚点列表添加了边框,但由于宽度增加,悬停时锚点会稍微向左移动。如何保证绝对定位?

解决方案:

在非hover状态下添加透明边框可以防止hover边框时的“跳动”

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}
登录后复制

说明:

透明边框允许锚点的宽度保持一致,因此当悬停边框出现时,位置不会发生变化。这是一个 JSFiddle 演示:

http://jsfiddle.net/TEUhM/3/

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板