Question

我想要实现的目标---＆gt; http://jsfiddle.net/46a8u/

我将这些样式应用于我的CSS。问题是我的链接在悬停时反弹到左边。我根本不希望他们动起来。我想要的唯一转换是下划线在悬停状态下从左到右。我在下面有一个codepen链接显示我的问题。再说一遍：我不希望我的链接（Contact，Behance，LinkedIn）移动，只是希望下划线在悬停时从左到右显示，就像我在上面发布的jsfiddle链接中一样。

谢谢！

我的Codepen http://codepen.io/Chris-Brennan/pen/Gpgvqy

Resolve-DnsName

Answer 1

使用伪片而不是动画边框。看看codepen.io/anon/pen/MaYQEp

Answer 2

这种情况正在发生，因为＆＃34;导航a＆＃34; margin-right不够好，当你在＃34时盘旋时，导航a：hover＆＃34;它推动了内容。据我所知，你可以通过

实现这一目标

使用以下css＆＃34;导航a＆＃34;

 nav a{
   text-decoration: none;
   display: inline-block;
   border-bottom: 3px solid blue;    
    margin-right: 65px; 
   width: 0px;
   -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
  }

和＃34;导航a：hover＆＃34;

的一些css

 nav a:hover{
 -webkit-transition: 0.5s ease;
   transition: 0.5s ease;
   border-bottom: 3px solid blue;
   width: 55px;
    margin-right: 9px;
 }

css下划线转换悬停状态弹跳我的列表项

2 个答案: