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

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;
 }

现场演示

Answer 4

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%;
}

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