主页 / coding / 问题 / 79530154
Accepted
Small Duck
Asked: 2025-03-24 12:56:24 +0800 CST

如何创建悬停触发的图像标题？

  • 772

将我的标题从这个改为我们在图像 #2和#3上看到的标题真的很复杂吗？将鼠标悬停在 © 上时，标题就会出现。

我不太懂编码，但我很想学习。有什么技巧吗？我需要 JS 和 CSS 吗？

我虽然有点类似，但我不知道如何添加

figcaption {
  position: relative;
}

figcaption :hover:after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  z-index: 999;
  background: #ccc;
  color: white;
  padding: 5px;
}
css

1 个回答

  1. Best Answer

    如果您将 figcaption 的文本以“正常”方式实际放入图形元素的标题中，那么您可以将其设置为并在图形悬停时display: none;进行设置。display: block

    将其绝对定位意味着可以将其定位在图像上方。请记住使父图形具有位置，以便 figcaption 相对于该位置定位。在此示例中，位于底部和右侧。

    <style>
  figure {
    position: relative;
    width: fit-content;
  }

  figcaption {
    display: none;
    position: absolute;
    bottom: 0;
    background: rgb(255, 255, 255, 0.6);
    right: 0;
    padding: 5px;
    margin: 5px;
  }

  figure:hover figcaption {
    display: block;
  }
</style>
<figure>
  <img
    src="https://picsum.photos/id/1015/200/300"
    alt="Blue vista" />
  <figcaption>Blue vista</figcaption>
</figure>

    • 0

相关问题