javascript - 鼠标悬停时图像的效果

Question

看看这个：

当指针位于图像上时，我希望在该图像的底部有一个带有一些文本的小暗矩形。我怎样才能做到这一点？也许用jquery？

多谢你们。

Answer 1

您可以通过多种方式实现这一目标。根据页面的结构，您可以使用几个 CSS 类来完成此操作。

HTML：

<div class="image_hover"><span>Text</span></div>

CSS：

.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }

您需要根据您的具体情况进行一些更新。这是一个关于 jsbin的工作示例。此方案默认隐藏文本，当用户将鼠标悬停在 div 上时，:hover 类将导致文本显示。

您还可以使用 jQuery 在鼠标悬停时添加或显示 div。

Answer 2

是的，您可以轻松地使用 jquery 来实现这一点。如果你想学习整个过程并自己动手，看看这个——Sliding Boxes and Captions with jQuery 或者看看几个插件来达到同样的效果——10个时尚的jQuery字幕插件