對文本的翻轉圖象有透明背景

Question

我沒有使用Javascript，但我對如何將圖像翻轉到另一個圖像有一個大概的想法。 我正在嘗試制作一個圖像，當鼠標懸停時，它將成為占據圖像所占空間的文本塊的透明背景。 我已經看過很多教程，但沒有相應的東西。

另外：有沒有辦法用css或其他方式格式化這個文本？ （比如添加填充，換行等）

任何幫助或鏈接到我可以弄明白的網站將不勝感激！ 謝謝！

Answer 1

這個小提琴是一個純粹的css實現，可以改變懸停在文本前面放置的圖像的不透明度。 為此，我使用了將文本和圖像容器放在容器div中並設置position: absolute以使它們重疊。 然后我使用:hover選擇器更改圖像的不透明度。 由於文本在圖像后面，因此無法選擇。 讓我知道這是你想要的，如果不是，請指明你想要的不同:)

Answer 2

如果您希望鼠標懸停后文本保留，可以使用javascript在翻轉時切換類並添加一些文本。 例如，將圖像作為背景放置到具有某個類的div（例如， class="solid-image" ）。 當您想要更改元素時，只需更改類（例如，使用myElement.className="translucent-image" ）然后您可以擁有以前不可見的文本，也可以向div添加文本（只要它沒有孩子）通過使用textContent或innerText元素。 例如：

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

然后為適當的事件添加事件偵聽器。