在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通道在内的颜色组件：

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

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

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

Answer 2

目前尚不清楚您如何或何时移动图像，也不清楚您试图启用的交互。

规则transition: 0s linear 0s什么也不做(需要0秒的转换不是转换)。此外，不需要指定0s延迟(0s的第二个实例)，因为这是默认值。

通常，将转换规则应用于元素本身而不是:hover状态是一个好主意。这样做将允许在有人搬走时从:hover中转换出来。

在下面的片段中，如果您将鼠标悬停在移动(或移动) image-div元素的底部附近，则会出现文本"Hello“。如果您希望在图像移动的同时显示文本，请删除#hello-text-right:hover末尾的:hover，这样就不需要悬停文本本身了。

​

#image-3, #hello-text-right {
    transition: all 2s;
}
#image-3 #hello-text-right {
    opacity: 0;
}
#image-3:hover #hello-text-right:hover {
    opacity: 1;
}
#image-3:hover {
  margin-left: 20px;
}
p, div span { color: white; }

<div id="image-3" style="background:url('https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg'); width:110px"> 
  <p>Sample</p>
  <div id="hello-text-right">
    <span>Hello</span>
  </div>
</div>

​