CSS链接悬停动画

我试图复制Codrops have here的动画。（例11，在蓝色背景上）。CSS链接悬停动画

我跟着他们的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播放，但该解决方案是暗指我！有人能指出我要去哪里吗？

来源

2013-10-31 Sheixt

您的文本不适合到具有0宽度太行包装的区域。它继续包裹，直到该区域足够宽以便它不包裹。这就是为什么你看到它这样做。 –

您可以添加max-height这种方式将溢流管也被隐藏：

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

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

编辑

现在要解决您的评论的问题。将此css添加到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-31 19:41:49 DaniP

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

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

来源

2013-10-31 19:41:19

基本相同的答案，因为这两个丹科&费利佩，但我用

max-height: 1em;

，不得不将其添加到“.the-post的文章a.post-title“&”.the-posts article 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 article a.post-title”就可以解决这两个问题。

来源

2013-10-31 19:46:55 Luke

只需将此添加到您的锚。原来是这样做的。

overflow:hidden;

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

来源

2013-10-31 20:20:12

CSS链接悬停动画

回答

相关问题