图像上带有文本的悬停效果不起作用

Question

我是一个非常基础的编码人员，需要一些东西才能工作，但 IDK 怎么做。我有一个网站，其中有 4 张图片。当您将鼠标悬停在这些 img 上时，它们会稍微变暗，但我希望有一种方法也可以显示一些文本（它应该如何工作的预览：https://imgur.com/a/r5cOW2R）

这是我的 GitHub 代码的链接：https://github.com/Ezzol/HCI-Portfolio

谁能向我解释我需要做些什么来添加您可以在 imgur 链接的设计中看到的悬停效果？

Answer 1

您可能希望使用 CSS hover 事件。这是一个很好的例子来说明如何做到这一点。

https://www.w3schools.com/howto/howto_css_image_overlay.asp

Answer 2

您可能还需要使用 javascript，并执行一个 EventListener 来判断它何时被悬停，然后使用 .style 来更改它，例如：

var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
 text.style.display = "block";
}

function examplechangeback()
{
  text.style.display = "none";
}

将 h1/h2/h3/p 元素添加到您的页面，并为其指定 id “text”，然后根据需要设置样式并将显示设置为无。