高级滚动显示额外选项

Question

我有一个网络应用程序，其中包含用户评论列表。我想对这些意见（投票，回复等。）额外的选项只出现在评论本身就是鼠标悬停-ED

的什么，我期待的是YouTube视频最好的例子：

http://www.youtube.com/watch?v=s2VzLn6DMCE&ob=av3e

当您转到注释时，选项（回复，投票上/下）仅在该特定评论滚动时才会显示。这是如何实现的？它只是一个使用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处理显示/隐藏，这样我就可以对每个元素进行全面访问。这样一来，我可能有条件地显示/隐藏元素基于登录，会话等

Jquery How-To

你还是会想建立的div出包含您的图标，并用CSS位置。背景更改也可以用Jquery处理，通过.css method