Question

我希望右边框永远是静态的。此时，当我悬停li元素border-right因为悬停时5px的border-top而向下移动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/

Answer 1

在底部添加它并将修复它^^，通过在悬停上添加填充底部它将补充边框顶部将添加的额外像素，其类似18 - 5 = 13并且右边界将保留相同的

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

Answer 2

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

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

Answer 3

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

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

Answer 4

尝试添加以下代码

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

元素边界正在继续悬停

4 个答案: