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

我有一个图像，其中包含最初隐藏的文本（下面的示例“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中，您有几种定义颜色的方法。其中之一是使用颜色组件，包括alpha通道：

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

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

---

也许您想在image元素中设置文本。为此，我建议您使用背景图像将其设置为一个DIV，并将文本放置在此DIV中。然后，您只需要对图像进行转换，文本将相对于图像进行放置。

不清楚如何或何时移动图像，或者您尝试启用的交互

规则

转换：0s线性0s

不起任何作用（零秒的转换不是转换）。此外，无需指定

0s

延迟（第二个

0s

实例），因为这是默认值

通常，最好将转换规则应用于元素本身，而不是应用于

：hover

状态。这样做将允许在有人离开时从

：悬停
转换

在下面的剪报中，如果将鼠标悬停在移动（或移动）图像div元素的底部附近，则会显示文本“Hello”。如果您希望文本在图像移动的同时显示，请删除
#hello text right:hover
末尾的
：hover
，然后您将删除悬停文本本身的要求


#image-3，#您好，文本对吗{
过渡：所有2；
}
#图3#您好，右键文本{
不透明度：0；
}
#图3：悬停#你好文本右：悬停{
不透明度：1；
}
#图3：悬停{
左边距：20px；
}
p、 div span{color:white；}

样品

你好
过渡期间如何处理？这不会考虑过渡悬停效果。如何开始过渡？这是一种基于javascript的方法吗？在这种情况下，您应该更改该元素的类。也许你可以提供一些关于转换的信息，以及它是如何完成的。我已经为此添加了css。这是一种纯粹基于css的方法。不，如果CSS中的id之间忘记了一个逗号，那么应该是
\image-3，#hello text right
@Ason加空格，这些规则将
id=“hello text right”
元素作为
id=“image-3”
元素的后代。ID之间的逗号将此规则列表应用于这两个元素，这不是预期的（图像最初应该是可见的）。
#hello-text-right{
    color:rgba(0,0,0,0);
}
#hello-text-right:hover{
    color:rgba(0,0,0,1);
}