正文 

当前位置： 首页 > 知识 >

CSS底部边框悬停“抖动”

     2023-03-06     32

关键词：

【中文标题】CSS底部边框悬停“抖动”【英文标题】：CSS bottom border hover "jitter" 【发布时间】：2015-07-03 18:10:57 【问题描述】：

我有一个导航栏，当您将鼠标悬停在导航按钮上时，我想给它一个橙色的底部边框。唯一的问题是，每当您悬停时，边框会使内容/导航按钮“抖动”，这是它们不应该的。此外，我在导航栏上已经有一个黑色的底边框，所以它不会改变它。

HTML：

<div id="navBarTop">
        <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="contact.html">Contact</a></li>
        </ul>
</div>

CSS：

#navBarTop 
    padding: 0;
    background-image: url('navBarBackground1.png');
    border-bottom: 1px solid #4c4c4c;
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;


#navBarTop ul 
    list-style: none;
    width: 800px;
    margin: 0 auto;
    padding: 0; 
    display: inline-block;


#navBarTop li 
    display: inline-block;


#navBarTop li a 
    display: block;
    padding: 10px 25px;
    text-decoration: none;
    font-family: "Arial";
    color: #ffffff;


#navBarTop li a:hover 
    border-bottom: 2px solid #FF8000;

【问题讨论】：

【参考方案1】：

抖动似乎是由于悬停时在底部添加了额外的 2px 边框造成的。这导致文本上升了一点。要解决此问题，请将您的 #navBarTop li a 更改为以下内容，确保始终有 2px 边框：

#navBarTop li a 
    display: block;
    padding: 10px 25px;
    text-decoration: none;
    font-family: "Arial";
    color: #00ffff;
    border-bottom: 2px solid transparent;  // <--- add this line

这应该为你稳定事情。

【讨论】：

悬停图像比例抖动错误

...SS缩放图像元素时，我设置了transform:scale和transition。项目边框抖动。我尝试添加will-change:transform;，没有任何变化。GIF（JSFiddleResult面板宽度：975px）：这里有错误：J 查看详情

边框底部问题（悬停时向下扩展）

】边框底部问题（悬停时向下扩展）【英文标题】：Border-bottomissue(expandingdownwardsonhover)【发布时间】：2013-04-2815:48:32【问题描述】：我正在研究导航，但我似乎无法弄清楚如何使底部边框的大小向上增加，而不是向下扩展（这反... 查看详情

悬停时的线性渐变底部边框

】悬停时的线性渐变底部边框【英文标题】：lineargradientbottomborderonhover【发布时间】：2016-03-1305:07:47【问题描述】：我正在尝试将border-bottom上的hover上的border-bottom应用到&lt;a&gt;但它没有100%有效我的目标是使用HTML和CSS仅在... 查看详情

悬停时表格标题的边框底部

】悬停时表格标题的边框底部【英文标题】：Border-bottomoftableheaderonhover【发布时间】：2021-02-1814:12:06【问题描述】：当我将鼠标悬停在其中一个标题上时，我希望该单元格的边框底部为红色。不幸的是，对我来说，它在sn-p代码... 查看详情

悬停效果：展开底部边框

】悬停效果：展开底部边框【英文标题】：Hovereffect:expandbottomborder【发布时间】：2015-04-2119:19:42【问题描述】：我正在尝试在边框上获得过渡悬停效果，使边框在悬停时扩展。h1color:#666;h1:afterposition:absolute;left:10px;content:\'\';height:... 查看详情

我可以使用 Tailwind CSS 在悬停时实现带下划线的按​​钮吗？

...下面的按钮。它是一个空白按钮，在悬停时会突出显示其底部边框。但是，浏览文档，我似乎无法重现效果。【问题讨论】：设置底部边框，使其透明，并在悬停时切换 查看详情

html在悬停效果中添加边框底部链接/[创建一个锚]（http://irwebdesign.ir）(代码片段)

查看详情

HTML href 与 css 即问题

...不重复；高度：100px；宽度：350像素；.web_westloh:悬停边框底部宽度：2px；边框底部样式：虚线；边框底部颜色：#999999；底部填充：5px；.web_money背景图片 查看详情

css3鼠标悬停边框线条动画按钮

在线演示本地下载 查看详情

CSS悬停创建边框但推送内容

】CSS悬停创建边框但推送内容【英文标题】：csshovercreatingborderbutpushingcontent【发布时间】：2013-09-2402:06:44【问题描述】：情况我目前正在构建一个网站，并希望在将鼠标悬停在某些元素上时创建一个边框/轮廓。这很简单，可以... 查看详情

css任何元素的css边框悬停效果(代码片段)

查看详情

CSS a：悬停图像边框

】CSSa：悬停图像边框【英文标题】：CSSa:hoverimageborders【发布时间】：2011-05-1015:37:08【问题描述】：我在表格中有一堆链接的图像，并带有一些填充。当我尝试添加img:hover或a:hover边框属性时，当边框出现时，所有内容都会移动边... 查看详情

悬停链接时，css 声明不起作用

...为按钮）时，我希望它在悬停时具有粉红色而不是棕色的底部边框属性，以补充红色按钮。感谢您的帮助。提前致谢！.header-nava:hoverborder-bottom:5pxsolidrgb(56,47 查看详情

CSS-Image边框发光时悬停单个颜色

】CSS-Image边框发光时悬停单个颜色【英文标题】：CSS-Imageborderglowwhenhoverwithindividualcolor【发布时间】：2014-10-3009:39:17【问题描述】：我想问当用户将鼠标悬停在图像边框上时，我应该如何将不同颜色的光晕应用到图像边框上？比... 查看详情

css双小时（边框顶部，边框底部）(代码片段)

查看详情

css边框底部样式#css(代码片段)

查看详情

悬停时图像上的 CSS 内边框

】悬停时图像上的CSS内边框【英文标题】：CSSInnerBorderonImageonHover【发布时间】：2015-07-0709:48:12【问题描述】：一直在搜索高低，虽然有很多花哨的悬停效果，但我希望有一些简单的东西可以应用于画廊中的图像，只需放置10像素... 查看详情

悬停时旋转时带有 CSS 多边形的不需要的边框

】悬停时旋转时带有CSS多边形的不需要的边框【英文标题】：UnwantedborderwithCSSpolygonwhenrotatingonhover【发布时间】：2016-04-1507:18:06【问题描述】：我在CSS中制作了一个T恤形状的多边形，除非我尝试在悬停时对其进行动画处理，否则... 查看详情