高级翻转以显示额外选项答案

【问题标题】：advanced rollover to display extra options高级翻转以显示额外选项
【发布时间】：2010-10-22 03:41:11
【问题描述】：

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

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

当您前往 cmets 时，选项（回复、赞成/反对）仅在该特定评论被翻转时才会显示。这是如何实现的？是否只是使用 jquery（或类似的 javascript 库）并显示隐藏的 div 的问题？

编辑：

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

【问题讨论】：

【解决方案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 和/或下一个兄弟选择器，或其他选择器。

【讨论】：

【解决方案2】：

纯 CSS 可能是一种选择，但我想我会使用 Jquery 处理显示/隐藏，这样我就可以完全访问每个元素。这样，我可能会根据登录、会话等有条件地显示/隐藏元素。

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

也可以使用 Jquery 处理背景更改

【讨论】：