Javascript 鼠标悬停时变为文本

我希望你很好

这里是我的问题，我试图使一个效果，当用户悬停在一个图像，鼠标变成文本。目前我找到的唯一解决方案是为每个图像创建一个自定义鼠标，并让每个类/img拥有自己的鼠标/文本。 这不是很好，因为它不适合于响应，而且在代码方面也不是很好。 你有什么想法吗

以下是使用此效果的网站：

再见，提前谢谢你，

---

Léo

您必须首先在HTML中创建一个div，在该div中放置悬停时将显示的图像和文本。在CSS上，确保文本具有绝对位置。然后使用JavaScript将带有文本的div附加到光标的位置

函数createTextCursor（事件）{
设el=document.getElementById（“hoveringText”）；
el.style.top=event.clientY+“px”；
el.style.left=event.clientX+“px”；
}
document.getElementById（“main”）.addEventListener（“mousemove”，createTextCursor）
#main:hover>#hoveringText{
显示：块；
}
#悬停文字{
位置：绝对位置；
字体：斜体；
字体大小：24px；
字体大小：粗体；
颜色：蓝色；
显示：无；
}
#主要{
宽度：300px；
高度：300px；
光标：无；
}

文本光标
您必须首先在HTML中创建一个div，在其中放置悬停时将显示的图像和文本。在CSS上，确保文本具有绝对位置。然后使用JavaScript将带有文本的div附加到光标的位置


函数createTextCursor（事件）{
设el=document.getElementById（“hoveringText”）；
el.style.top=event.clientY+“px”；
el.style.left=event.clientX+“px”；
}
document.getElementById（“main”）.addEventListener（“mousemove”，createTextCursor）
#main:hover>#hoveringText{
显示：块；
}
#悬停文字{
位置：绝对位置；
字体：斜体；
字体大小：24px；
字体大小：粗体；
颜色：蓝色；
显示：无；
}
#主要{
宽度：300px；
高度：300px；
光标：无；
}

文本光标
请将您的解决方案发布在一个有效/最少/易于阅读的代码中，以便我们为其提供建议/优化。本网站不是为您询问其他人的代码…请将您的解决方案发布在一个有效/最少/易于阅读的代码中，以便我们为其提供建议/优化。这个网站不是为你询问别人的代码…你好！谢谢你的快速回答。您的代码运行良好，但我有一个小问题。有时文本和光标会移动几十个像素，我们可以在代码中看到，你知道我如何调整它吗？谢谢你advance@L我已经编辑过了。看看这是否解决了问题。我必须使#main div与图像具有相同的宽度和高度，以确保文本仅在悬停图像时出现。非常感谢！你好谢谢你的快速回答。您的代码运行良好，但我有一个小问题。有时文本和光标会移动几十个像素，我们可以在代码中看到，你知道我如何调整它吗？谢谢你advance@L我已经编辑过了。看看这是否解决了问题。我必须使#main div与图像具有相同的宽度和高度，以确保文本仅在悬停图像时出现。非常感谢！