Question

我正试图将黄色条形图像边框底部的那样。（我想摆脱边界底部我只是把它推到了例如

.navbar  li{
    display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;
}

.navbar li:hover, .navbar li:active{
   border-width:4px;    
   border-top-style:solid;
   border-top-color: #e0b82b;
      -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);

谢谢

Answer 1

就像您使用:after使用:before一样，您的代码应为：

.navbar li:before, .navbar li:after{
  display: block;
  content: '';
  -webkit-transform: scaleX(0.0001);
  -ms-transform: scaleX(0.0001);
  transform: scaleX(0.0001);  
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
}
.navbar li:before{
  border-top: solid 3px #e0b82b;
}
.navbar li:after{
  border-bottom: solid 3px #019fb6;
}
.navbar li:hover:before, .navbar li:hover:after{
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

DEMO

注意：我还会移除border-top-color: #e0b82b;上的.navbar li:hover, .navbar li:active。也许你想再做一些改变;）

在悬停时从中心展开border-top

1 个答案: