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

Question

我是一个非常基础的编码人员，需要一些东西来工作，但IDK如何工作。我有一个网站，我有4张图片。当你把鼠标悬停在这些img上时，它们会变得稍微暗一点，但我希望有一种方法可以显示一些文本(预览它应该如何工作：https://i.stack.imgur.com/VUW8i.jpg)

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

有人能向我解释一下我需要做什么来添加你在imgur链接上看到的悬停效果吗？

Answer 1

您可能希望使用CSShover事件。下面是一个如何做到这一点的好例子。

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"；文本"；然后按照您想要的方式设置样式，并将显示设置为无。