Question

我正在寻找有人指出我正朝着正确的方向发展这个我正在努力奋斗的想法。我希望有一个标题为as pictured的小图片，当您将鼠标悬停在图片上方时，标题将展开图片并显示文本SHOWN HERE。我希望这是有道理的。

谢谢！

Answer 1

没有任何代码，我对你想要的东西做了一些假设。

您需要一个div来包含图像和文本。

<div class="img-wrapper">
    <img src="[image source]">
    <div class="overlay-title">
    Your Title Here
    </div>
    <div class="overlay-text">
    Your Overlay Text Here
    </div>
</div>

这将允许您使用图像上的绝对定位来定位文本。使用css＆＃39;：hover＆＃39;控制何时显示/隐藏文本。

.overlay-text {
  display: none;
}
.overlay-title {
  display: none;
}

.img-wrapper:hover .overlay-text {
    display: block
}
.img-wrapper:hover .overlay-title {
    display: none
}

试试这个： https://jsfiddle.net/0cjump59/3/

如何使div扩展到另一个div（悬停时）以显示文本

1 个答案: