html - 在 css 中悬停和过渡期间更改文本不透明度

Question

我有一个图像，其中包含最初隐藏的文本(下面的示例“hello”最初是隐藏的)。

当我将鼠标悬停在文本上时，它应该会显示。

我还使用“过渡”将图像从一个位置移动到另一个位置。

当图像从一个位置移动到另一个位置时，文本的悬停效果应保持不变。

在下面的示例中，我希望文本“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 channel 在内的颜色分量:

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

在我的示例中现在是黑色文本，但您可以使用任何您想要的 rgba 值。

也许您想在图像元素中设置文本。为此，我建议您使用背景图像将其设为 DIV，并将文本放置在该 DIV 中。然后您只需要图像的过渡，文本将相对于它放置。