JQuery：创建在悬停时显示在div顶部的盒装文本答案

【问题标题】：JQuery: Creating boxed text that shows on top of a div on hoverJQuery：创建在悬停时显示在div顶部的盒装文本
【发布时间】：2010-12-07 13:27:16
【问题描述】：

假设我有一个名为 mainDiv 的 div，它包含一个 <p> 元素，其中包含一些文本。我想在 将鼠标悬停在第一个 <p> 元素时显示的同一个 div 内创建另一个元素（<p> 或 <div> 或其他东西？），并隐藏将鼠标从第一个元素移开后不久。优选地，第二个元素中的文本被封闭在一个黑盒子中，或者类似于Facebook照片页面标题的东西，例如。

如何做到这一点？我正在考虑为悬停事件添加一个切换功能，但我不确定该怎么做，因为我对 JQuery 很陌生。另外，您能否提供一些 CSS 来为悬停时显示的元素创建一个框（可能是半透明的，不透明度可能为 60% 左右？）？另外，如果这可以通过 toggle() 完成，是否可以将 toggle() 与 动画速度 一起使用，例如慢或快（如 show(slow) 中的）？

此外，我认为高 z 顺序对于实现此目标至关重要，但我不确定该框是否会直接显示在上方，而不是侧面或类似的位置。

【问题讨论】：

标签： jquery css hover z-order

【解决方案1】：

并不是真正的直接破解，但如果我有这项任务的负担，我会看看 jQuery Tooltip from the TOOLS 库。源代码应该让您了解如何有效地实现它，或者您可以节省一些时间并改用它（或类似的库）。

【讨论】：

【解决方案2】：

jQuery 中的滑动字幕

关于使用 jquery 创建漂亮的图像半透明滑动字幕，有一个非常好的教程。

看看Demonstration of Sliding Captions

教程本身位于：http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

【讨论】：