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

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

基本上，我有一个当前以div显示的项目列表。我使用jQueryUI插件和连接样式在用户悬停在每个项目上时进行切换。现在，当鼠标悬停在每个项目上时，我希望在每个项目的右上角显示一组类似于工具栏的按钮。当鼠标上下移动到下一个项目时，工具栏将“移动”到该项目。当然，它不会真正移动——我假设我正在切换与每个项目关联的工具栏的可见性

后一点是由几个因素造成的，包括按钮使用每个列表项的id值进行编码，以便命令知道要针对哪个项工作

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

更新

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

---

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

如果您只需要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>

CSS
/*这包含注入的JS和当前内容*/
.突出显示{背景：#ddd；位置：相对；溢出：自动；填充：15px；}
.highlight*{margin:0；padding:0；}
/*您将在此处放置操作按钮，它们似乎是：删除、升级、降级*/
.highlight.nav{位置：绝对；顶部：0；右侧：0；背景：#333；列表样式类型：无；}
.highlight.nav li{float:左；边距：0 1px；列表样式类型：无；}
/*添加每个按钮的样式，它们现在看起来都一样*/
.highlight.nav li a{显示：块；高度：15px；宽度：10px；背景：红色；文本缩进：-999px；光标：指针；}
HTML


祝你好运，
Leo
你能至少发布一些HTML和JS，让我们了解你的拍摄目的吗？Lol“勾搭风格”…抱歉忍不住：]这根本不起作用。除了在左上角显示“工具栏”（这是一件小事），没有重叠，因此在顶部显示“删除”一词，这是一个很好的分隔符，然后是段落文本。不是我要找的。如果你觉得我错了，请用适用于你的完整HTML和CSS更新你的帖子，我会再试一次。抱歉，似乎我输入了一些错别字，没有得到一些类，现在又来了：太有趣了。JSFIDDLE站点几乎正是我想要的。当您将鼠标悬停在HTML框上时，您将在其他框上看到CSS、JavaScript和结果气球。将鼠标移到CSS框上，该框消失，HTML气球出现。这就是我要寻找的，除了相反方向——当我将鼠标悬停在CSS上时，气球应该出现，而所有其他气球都隐藏起来。我可以使用jQuery处理这个部分。我不得不稍微处理一下你的代码（p表示跨度，add width:100%表示突出显示），但它看起来很有效。我会看看下一步是否能让它在我的网站上运行。虽然花了一段时间，但我终于能够回到这个项目并验证解决方案。