对文本的翻转图象有透明背景

Question

我没有使用Javascript，但我对如何将图像翻转到另一个图像有一个大概的了解。我正在尝试制作一个图像，当鼠标悬停时，它将变成一个文本块的透明背景，占据图像占用的空间。我已经看过很多教程，但没有相应的内容。

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

任何帮助或链接到我可以弄明白的网站将不胜感激！谢谢！

Answer 1

此fiddle是一个纯css实现，用于更改悬停在文本前面的图像的不透明度。为此，我使用了将文本和图像容器放在容器div中并设置position: absolute以使它们重叠。然后，我使用:hover选择器更改图像的不透明度。由于文本在图像后面，因此无法选择。如果这不是你想要的，请告诉我，如果不是，请指明你想要的不同：）

Answer 2

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

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

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