Question

我正在尝试复制Codrops have here的动画。（例11，蓝色背景）。

我已经关注了他们的CSS但是我得到了一个奇怪的结果，文本堆栈并且在悬停时没有正确显示。您可以在this JSFiddle中看到它。

这里仅供参考：HTML：

<div id="content" class="small-12 columns the-posts">
    <article id="post-162" class="post-162 post type-post status-publish format-standard hentry category-uncategorized row">
        <a href="http://localhost/pondera_v3/uncategorized/test-post-6/" rel="bookmark" title="Test Post 6" class="post-title" data-hover="Test Post 6">Test Post 6</a>
    </article>
</div>

这是CSS：

.the-posts article a.post-title {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-family: arial, helvetica;
    text-decoration: none;
    font-size: 29px;
}
.the-posts article a.post-title::before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    max-width: 0;
    color: #86a63e;
    content: attr(data-hover);
    -webkit-transition: max-width 0.5s;
    -moz-transition: max-width 0.5s;
    transition: max-width 0.5s;
}

.the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before {
    max-width: 100%;
}

我玩overflow，但解决方案是暗指我！有人可以指出我出错的地方吗？

Answer 1

您可以添加max-height，这样也可以隐藏溢出线：

.the-posts article a.post-title::before {    
  max-height:29px;
}

观看演示 http://jsfiddle.net/abnUE/2/

修改

现在解决你的评论问题。在max height添加此css，而不是.the-posts article a.post-title::before { height:0; }。

.the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before { height:100%; }

在悬停中：

{{1}}

新演示 http://jsfiddle.net/abnUE/7/

Answer 2

在height:29px;

中添加.the-posts article a.post-title::before

http://jsfiddle.net/felipemiosso/abnUE/3/

Answer 3

与Danko和amp;同样的基本答案菲利普，除了我用过

max-height: 1em;

并且必须将它添加到“.the-posts article a.post-title”＆amp; “.the-posts文章a.post-title：hover :: before，.the-posts article a.post-title：focus :: before”因为当我停止盘旋时它有与以前出现的问题相同的问题因为它消失了。

编辑：我看到了我的错误，我首先添加错误的CSS。只添加“.the-posts文章a.post-title：hover :: before，.the-posts文章a.post-title：focus :: before”修复了初始悬停时的问题但是当你还有问题时停止了徘徊。只需添加“.the-posts文章a.post-title”即可修复它们。

Answer 4

只需将此添加到您的锚点即可。这就是原作的方式。

overflow:hidden;

http://jsfiddle.net/csh8F/1/

CSS链接悬停动画

4 个答案: