html - 如何向这些 CSS 消息气泡添加滑动 div？

Question

webdev 的新手所以请多多包涵。我正在开发一个消息传递应用程序的原型(prototype)，我已经完成了大部分基础知识，我正在尝试添加一些小细节以使其使用起来感觉更好。我试图做到这一点，以便当将单个消息悬停时，发送该消息的时间将从消息中滑出。

这是我目前的代码:http://codepen.io/RBrNx/pen/GNzOWr (注意:再次点击“Toni”，会出现他的消息，小bug。你也可以从文本框发送消息)。

现在这里有一些图片显示了我的意思: http://imgur.com/a/elB04

理想情况下，我认为第二个会更好看。

我试图通过在气泡内添加一个 span 来实现它，如下所示:

<div class="bubble you">Test Message<span class="hover-time">13.45</span></div>

.hover-time{
   position: relative;
   left: 60px;
}

但这使得气泡的内部拉伸(stretch)以解释 Span。

如何做到这一点？

编辑:多亏了 Antidecaf，我设法让左侧工作并弄清楚了右侧。这是我添加的 CSS:

.container .right .bubble.you .hover-time {
    display: none;
    position: absolute;
    left: 110%;
    color: #999;
    width: 100px;
}

.container .right .bubble.me .hover-time {
    display: none;
    position: absolute;
    right: 90%;
    color: #999;
    width: 100px;
}

这些处理左手消息(来自您发送消息的人)和右手消息(来 self )。我还补充说:

.container .right .bubble.you:hover .hover-time{
    display: inline-block;
}
.container .right .bubble.me:hover .hover-time{
    display: inline-block;
}

以便在悬停时显示悬停时间跨度。

Answer 1

您可以通过将 .hover-time 相对于 .bubble 定位来使用您建议的标记来执行此操作。为此，将 position: relative 添加到 .bubble 并将 position: absolute 添加到 .hover-time。 Here's some more info on the technique .

<div class="bubble you"><span class="hover-time">13.45</span>Test Message</div>

用于将时间戳定位在右侧的 CSS:

.bubble {
    position: relative;
}

.hover-time {
    position: absolute;
    left: 110%;
    color: #999;
}

同样的方法也适用于将它定位在左侧，但在这种情况下，您需要为气泡添加一点边距，以便为时间戳腾出空间:

.bubble {
    position: relative;
    margin-left: 50px;
}

.hover-time {
    position: absolute;
    left: -50px;
    color: #999;
}