Question

webdev的新手所以请耐心等待。我正在开发一个消息传递应用程序的原型，我已经完成了大部分基础工作，并且我尝试添加一些小点，以使其使用起来更好。我尝试这样做，以便当单个消息悬停时，消息发送的时间将从消息中滑出。

此处是我的代码：http://codepen.io/RBrNx/pen/GNzOWr （注意：点击＆＃34; Toni＆＃34;再次显示他的消息，小错误。您也可以从文本框发送消息。）

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

但是这使得泡沫内部延伸到了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;
}

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

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

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保持为不可见的结构元素？

如何为这些CSS消息泡泡添加滑动div？

3 个答案: