javascript - 将图像翻转为具有透明背景的文本

Question

我没有太多使用 Javascript，但我对如何将图像翻转到另一个图像有一个粗略的想法。我正在尝试制作一个图像，当鼠标悬停时，它将成为一块文本的透明背景，该文本块将占据图像所占据的空间。我看过很多教程，但没有什么与之匹配的。

另外：有没有办法用css或其他方式格式化这个文本？（如添加填充、换行符等）

任何帮助或指向我能找到的网站的链接将不胜感激！谢谢！

Answer 1

这个小提琴是一个纯 css 实现，它改变悬停时放置在文本前面的图像的不透明度。为此，我将文本和图像容器都放在容器 div 中并设置position: absolute为重叠。然后我使用选择器更改图像的不透明度:hover。由于文字在图像后面，因此无法选择。让我知道这是否是您想要的，如果不是，请指定您想要的不同:)

Answer 2

如果您希望文本在鼠标悬停后保留，您可以使用 javascript 在鼠标悬停时切换一个类并添加一些文本。例如，将图像作为背景放置到具有某些类（例如class="solid-image"）的 div 中。当您想要更改元素时，只需更改类（例如，使用myElement.className="translucent-image"），然后您可以拥有以前不可见的文本，或者您可以通过使用将文本添加到 div（只要它没有子元素）textContent或innerText元素。例如：

text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";

然后为适当的事件添加一个事件监听器。