元素边框在悬停时移动答案

【问题标题】：element border is moving on hover元素边框在悬停时移动
【发布时间】：2014-02-20 19:38:45
【问题描述】：

我希望右边框始终是静态的。此刻，当我将 li 元素悬停时，border-right 向下移动了 5px，因为悬停时的边框顶部为 5px。

HTML

<nav>
   <ul>
     <li><a href="link1">link1</a></li>
     <li><a href="link2">link2</a></li>
     <li><a href="link3">link3</a></li>             
     <li><a href="link4">link4</a></li>
   </ul>
  </nav>

CSS

    nav li a {
    border-right: 1px solid #cdcdcd;
    }
    nav ul li:first-child a:hover {
        border-top:5px solid #d1e751;
    }
    nav ul li:nth-child(2) a:hover {
        border-top: 5px solid #F06B50;
    }
    nav ul li:nth-child(3) a:hover {
        border-top: 5px solid #eee;
    }
    nav ul li:last-child(4) a:hover {
        border-top: 5px solid #a8def4;
    }

http://jsfiddle.net/Xfy6P/

【问题讨论】：

你能提供一个jsfiddle吗？
只设置一个初始的border-top 属性？
jsfiddle.net/Xfy6P

标签： html css hover

【解决方案1】：

在底部添加它，它将修复它^^，通过在悬停时添加 padding-bottom 它将补偿边框顶部将添加的额外像素，例如 18 - 5 = 13 并且边框右侧将保留一样的

nav ul li a:hover{
    padding-bottom:13px;
}

【讨论】：

像魅力一样工作。非常感谢！ :D

【解决方案2】：

使用容器的背景颜色设置顶部边框喜欢

nav li a {
    border-right: 1px solid #cdcdcd;
    border-top: 5px solid [background-color];
    }

【讨论】：

或者设置颜色为透明。
jsfiddle.net/Xfy6P/1 - 将初始边框顶部设置为白色作品。您也可以将其设置为透明。
谢谢。但如果可能的话，我想保持这种移动效果。
那么你最后的问题是什么..？
我希望右边框在悬停时保持静态，同时保持移动文本效果。

【解决方案3】：

刚刚在您的 CSS 代码中添加了一个属性。

nav li a {
    border-top:5px solid transparent; /* using the transparent border to achieve the result*/
    border-right: 1px solid #cdcdcd;
}

【讨论】：

谢谢。有没有办法让移动文本效果悬停？我只想修复右边框，如果可能的话，让它成为静态的。

【解决方案4】：

尝试添加以下代码

nav ul li a{
        padding-top:23px;
    }
     nav ul li a:hover{
        padding-top:18px;
     }

【讨论】：

不要只是粘贴代码，稍微解释一下，以便未来用户或知识较少的当前用户能够更好地理解您的答案