CSS 不透明度过渡答案

【问题标题】：CSS opacity transitionsCSS 不透明度过渡
【发布时间】：2021-07-26 22:27:30
【问题描述】：

我正在尝试将照片滑块中所选图像的不透明度设置为 1。它适用于悬停，并且我确信正确分配了 active-thumbnail 类，因为当我尝试任何其他样式时它会起作用。即使我将不透明度设置为小于 0.6，它也会使其更加透明。唯一我不能让它的不透明度高于 0.6。

这可能是一件小而愚蠢的事情，但我已经尝试了很多东西，我不知道该怎么办了！提前感谢您的帮助！

.photo-thumbnail {
  width: 10%;
  margin: 2px;
  opacity: 0.6;
  transition: opacity 300ms ease-in;
}

.photo-thumbnail:hover {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.active-thumbnail {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

【问题讨论】：

您的 css transition 定义中有错字。请RTM
感谢您鼓励人们寻求帮助，3 个过渡相同，2 个工作。所以请解释一下错字在哪里。
对此我感到非常抱歉，这是我的错（没有正确复制代码）。所以你试图将.photo-thumbnail 的不透明度更改为.8（例如）但它不起作用？
不用担心，每个人都会遇到！ - 是的，我希望它回到 1，就像你将鼠标悬停在它上面一样。它在悬停时有效，但在分配活动缩略图类时无效
您能否在 JS Fiddle 上创建一个可重现的示例？只是添加类的基本 HTML 和 JS

标签： css transition opacity

【解决方案1】：

查看您的代码，表明您正在图像元素上应用活动类active-thumbnail。

改为在 Grandparent 元素上执行此操作（具有类 photo-thumbnail）。

.photo-thumbnail {
    width: 10%;
    margin: 2px;
    opacity: .6;
    transition: opacity .3s ease-in;
}

活动photo-thumbnail的最终结果应如下所示

 class="photo-thumbnail active-thumbnail"

所以你可能会改变这个

className: "mySlides ".concat(g && g === A.id ? "active-thumbnail" : "")

在您的main.js 文件中对此进行说明

className: "photo-thumbnail ".concat(g && g === A.id ? "active-thumbnail" : "")

【讨论】：

好的，我要试试这个！谢谢！但与此同时，当我想将不透明度设置为 0 时，我仍然不明白它是否有效，但反过来却不行。无论如何，我从未使用过 .concat，所以感谢您教我一些新东西！
@Rianne 是您项目中的代码，编译后的代码检查您处理点击事件的 javascript，只需将 mySlides 更改为 photo-thumbnail 即可。