在懸停和在CSS中轉換期間更改文本不透明度

Question

我有一個圖像，其中包含最初隱藏的文本（以下示例「hello」初始隱藏）。

當我將鼠標懸停在文本上時，它應該顯示出來。

此外，我正在使用「過渡」將圖像從一個位置移動到另一個位置。

當圖像從一個位置移動到另一個位置時，文本的懸停效果應該保持不變。

正如在下面的例子中，我希望文本「你好」具有上述效果。

<div id="image-3"> 
    <img src="sample.jpg" height="110" width="110"> 
    <div> 
     <p>Sample</p> 
    </div> 
    <div id="hello-text-right"> 
     <span>Hello</span> 
    </div> 
</div> 

對於文本的過渡我有這樣的CSS。但在這種情況下，文本的傳播速度比圖像的最終位置要快。

#image-3 #hello-text-right{ 
    opacity:0; 
} 

#image-3:hover #hello-text-right:hover{ 
    opacity:1; 
    transition: all 0s linear 0s; 
} 

任何幫助將不勝感激。

Answer 1

在CSS中，您有幾種方法來定義顏色。其中之一是使用顏色組件，包括alpha通道：

#hello-text-right{ 
    color:rgba(0,0,0,0); 
} 
#hello-text-right:hover{ 
    color:rgba(0,0,0,1); 
} 

這是現在在我的例子黑色文本，但你可以使用任何你想要的RGBA值。

也許你想設置圖像元素內的文字。要做到這一點，我建議你使用背景圖像將其製作爲DIV，並將文本放在此DIV中。然後你只需要圖像的轉換，文本將相對於它放置。