如何在Gmail附件中实现“悬停”？

Question

当您将鼠标悬停在Gmail附件上时，缩略图会消失，代替文档名称​​以及一些按钮。

上面的屏幕快照隐藏了我的光标，但实际上我特别将鼠标悬停在“下载”图标上，但是缩略图仍然代替了文件名-这是我无法模仿的部分。在尝试过程中，我只是在悬停时更改了缩略图的不透明度（而不是换成文件名），但是一旦将鼠标悬停在按钮本身上，就会丢失不透明度更改。

CodeSandbox：https://codesandbox.io/s/stupefied-euclid-utp7i

Answer 1

如果将“按钮”移到“图像”上方，则可以创建一个CSS规则，将其悬停在按钮上：

.btn:hover + a > img { background: #b2b2b9; opacity: 0.5; }

https://codesandbox.io/s/divine-http-zcedi