Question

我正在尝试重新创建我在"TheButton" subreddit上看到的效果。您可以看到，大多数用户名旁边都有一个彩色圆点，当它悬停在展开位置并显示一些基础文本时。

使用他们的CSS作为起点，我可以重新创建这个效果，但我的问题是我所拥有的基础文本没有崩溃，所以当用户没有悬停时我永远不会达到“点”形状。

这是我的CSS：

* {
    font: normal x-small verdana,arial,helvetica,sans-serif;
}
.flair {
    min-width: 12px;
    max-width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 12px;
    border: none;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
    font-size: 10px !important;
    -webkit-transition:all 0.3s;
    transition: all 0.3s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
    position: relative;
}
.flair:hover {
    max-width: 500px;
    padding: 0 5px;
    color: #fff;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.flair-no-press {
    background:#888;
    color:#888;
}

这是我的HTML：

<span class="flair flair-no-press" title="non presser">non presser</span>

Here's a jsfiddle显示了这个样子。再一次，我的预期效果就是在没有像他们一样徘徊时完全折叠点。

我在这里缺少什么？

不悬停在文本上时，文本会消失

0 个答案: