鼠标悬停时图像效果

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上的working example。此解决方案默认隐藏文本，当用户将鼠标悬停在div上时，：hover类将导致显示文本。

您还可以使用jQuery添加或显示div onmouseover。

Answer 2

是的，您可以轻松使用jquery来实现这一目标。 如果您想学习整个过程并自己动手，请看一下 - Sliding Boxes and Captions with jQuery 或者看一些插件来实现相同的效果 - 10 Stylish jQuery caption plugins