如何在这些CSS消息气泡中添加滑动div？

Question

webdev的新手，请多多包涵。 我正在开发消息传递应用程序的原型，我已经掌握了大多数基础知识，并且我试图添加一些技巧以使其更易于使用。 我正在努力做到这一点，以便当悬停单个消息时，该消息的发送时间将从消息中滑出。

这是我目前的代码： http : //codepen.io/RBrNx/pen/GNzOWr （注意：再次单击“ Toni”，他的消息将会出现，小错误。您也可以从文本框中发送消息）。

现在，这里有一些图片显示了我的意思： 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;
}

但这使气泡的内部伸展，以解释跨度。

如何才能做到这一点？

编辑：多亏了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;
}

这些处理左手消息（来自您正在发消息的人）和右手消息（来自我）。 我还补充说：

.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和position: relative对于.hover-time的position: absolute添加。 这是有关该技术的更多信息 。

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

Answer 2

<style>
.hover-time {
  position: relative;
  left: 60px;
  display: none;
}

.bubble:hover .hover-time {
  background-color: #ccc;
  color: #000;
  display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>

为我工作。 您可能需要使用一些转换或其他精美的动画东西来为其增添一点趣味。

编辑：也许你的意思是这样的：

<style>
.bubble {
  border: 1px solid #ccc;
  width: 300px;
}

.hover-time {
  float: right;
  display: none;
}

.bubble:hover .hover-time {
  background-color: #ccc;
  color: #000;
  display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>

边框和宽度只是为了获得视觉引导。

Answer 3

也许我误会了，但是您是否将DIV设置为语音泡沫，然后将div内的间距表示为“但不是您的伙伴，您很特别”？

如果是这样，将文本消息也放置在跨度中，将跨度设置为文本气泡样式，并将div保留为不可见的结构元素，是否更干净，更省事？