0

我正在尝试复制Codrops 在这里的动画。（示例 11，在蓝色背景上）。

我遵循了他们的 CSS，但是我得到了一个奇怪的结果，文本堆叠并且在悬停时没有正确显示。您可以在此 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但解决方案是在暗示我！有人可以指出我哪里出错了吗？

4

4 回答 4

4

您可以添加一个max-height这样的方式溢出线也被隐藏：

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

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

编辑

现在解决您的评论问题。在max height.

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

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

于 2013-10-31T19:41:49.147 回答
0

只需将此添加到您的锚点。这就是原版的做法。

overflow:hidden;

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

于 2013-10-31T20:20:12.150 回答
0

height:29px;在里面添加.the-posts article a.post-title::before

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

于 2013-10-31T19:41:19.733 回答
0

与 Danko 和 Felipe 相同的基本答案，除了我使用

max-height: 1em;

并且必须将其添加到“.the-posts 文章 a.post-title”和“.the-posts 文章 a.post-title:hover::before, .the-posts 文章 a.post-title:focus: :before" 因为当我停止悬停时，它遇到了与以前相同的问题，文本消失后出现在下面。

编辑：我看到了我的错误，我首先添加了错误的 CSS。仅添加“.the-posts 文章 a.post-title:hover::before, .the-posts 文章 a.post-title:focus::before”解决了初始悬停时的问题，但当您停止徘徊。只需添加到“.the-posts article a.post-title”即可修复两者。

于 2013-10-31T19:46:55.557 回答