jQuery / CSS浮动/覆盖工具栏/按钮

Question

我不确定我是否使用正确的术语来描述我正在寻找的东西，但这是我能想到的最好的。

基本上我有一个我目前在DIV中显示的项目列表。当用户将鼠标悬停在每个项目上时，我正在使用jQuery UI插件并挂钩样式以进行切换。现在，我希望当鼠标悬停在该项目上时，每个项目的右上角会出现一个类似工具栏的小按钮组。当鼠标向上或向下移动到下一个项目时，工具栏会“移动”到该项目。当然，它并没有真正移动 - 我假设我正在切换与每个项目相关联的工具栏的可见性。

后一点是由于一些因素造成的，包括按钮使用每个列表项的id值进行编码，因此命令知道要对哪个项进行操作。

我需要知道的是如何创建HTML和CSS，以便我可以拥有一个不受工具栏显示影响的内容的DIV。以及标记和样式设置，使工具栏显示在每个项目的右上角，位于现有内容之上。

更新

我基本上有一个＆lt; DIV＆gt;包含另一个＆lt; DIV＆gt;的包装器与文本和另一个＆lt; DIV＆gt;包含一组图像按钮（包含在锚点中的图像）。我需要的是HTML和CSS，以便＆lt; DIV＆gt; （或使其工作所需的任何其他元素）包含按钮似乎浮动在父＆lt; DIV＆gt;的右上角。如下图所示：

然后我可以使用jQuery在项目悬停时显示和隐藏按钮。

Answer 1

如果您只需要HTML / CSS，则可以执行以下操作：

CSS
/* this contain both your injected JS and your current content */
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;}
.highlight * {margin:0; padding:0;}
/* you will place your action buttons here, they seem to be: delete, promote, demote */
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; }
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;}
/* add the styles per each button, they will all look the same for now */
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;}

HTML
<div class="highlight">
  <ul class="nav">
    <li><a>DELETE</a></li>
    <li><a>PROMOTE</a></li>
    <li><a>DEMOTE</a></li>
  </ul>
 <p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p>
</div>

编辑：更新了我在http://jsfiddle.net/edCD3/

发布的代码 祝你好运， 利奥