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; }

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

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