Question

我想在悬停时从左到右动画水平导航中的边框。我能找到的最接近的例子就是这里的例子：http://css-tricks.com/examples/MagicLine/但它不是我想要的。

我只是想悬停并有一个下划线，只需从左到右画画。

感谢您的任何建议。

Answer 1

<div class="menuitem">
    Menu Item
    <span></span>
</div>

CSS：

.menuitem {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 32px;
    text-align: center;
    background: #FFE;
    cursor: pointer;
}
.menuitem span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #000;
    transition: all 0.6s;
}
.menuitem:hover span {
    width: 100%;
}

<强> http://jsfiddle.net/samliew/QUMgy/

Answer 2

其他解决方法可能是：

1) Make another element say a div and place it below the Nav bar.
2) Animate the that div when user hovers over any of the menu items.
3) And animate back when the pointer moves out of the navigation bar's parent.

这是我能想到的最简单的事情。

Answer 3

试试这个 CSS

.menuitem {
    display: inline-block;
}
.menuitem:after {
    content: '';
    display: block;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
 }
 .menuitem:hover:after {
    width: 100%;
    background: blue;
 }

Live Demo

Answer 4

＆＃13;

a {
  text-decoration: none;
  position: relative;
  color: grey;
  padding: 4px;
  font-size: 2rem;
  font-weight: bold;
}
a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 5px solid red;
  transition: 0.5s;
}
a:hover:after {
  width: 100%;
}

＆＃13;

<a href ="#">Test Link</a>

＆＃13;

如何从左到右为水平导航项下方的边框设置动画

4 个答案: