Question

我有一个包含用户评论列表的网络应用。我希望这些评论的额外选项（投票，回复等）仅在评论本身被鼠标移除时出现

我正在寻找的最好的例子是youtube视频：

当您转到评论时，只有当该特定评论被翻转时，才会显示选项（回复，投票/递减）。这是如何实现的？是仅仅使用jquery（或类似的javascript库）并显示隐藏的div？

编辑：

好的，我翻过的元素很复杂，我需要用javascript来完成它。我正在使用rails，所以它是原型！每个列表项都有一个唯一的id，但我不知道如何将这个id变量传递给原型！这样，它可以显示/隐藏特定列表项中的元素。我该怎么做呢？

Answer 1

在我看来，CSS是最好的方式。这是一个垂直方式：

HTML：

<div class='roller'>
  <div>Options</div>
  <div>Comments</div>
</div>

CSS：

.roller { overflow:hidden; height:30px;line-height:30px }
.roller:hover { height:60px }

这是一个横向的方式，使用相同的HTML：

CSS：

.roller { overflow:hidden;width:100px }
.roller div { width:100px;float:left }
.roller:hover { width:200px }

一点创意边距/填充工作，您可以获得不同的结果。

此外，您可以使用first-child和/或下一个兄弟选择器或其他。

Answer 2

纯CSS可能是一个选项，但我认为我将使用Jquery处理show / hide，以便我可以完全访问每个元素。这样，我可以根据登录，会话等有条件地显示/隐藏元素。

您仍然希望构建div以包含您的图标，并使用CSS定位。也可以通过.css method

使用Jquery处理后台更改