css - 如何在 Gmail 附件中实现 "hover"？

Question

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

上面的屏幕截图隐藏了我的光标，但实际上我专门将鼠标悬停在“下载”图标上，但是缩略图仍然代替了文件名——这是我未能模仿的部分。在我的尝试中，我只是在悬停时更改缩略图的不透明度(而不是换出文件名)，但是一旦我悬停在按钮本身上，我就失去了不透明度的变化。

代码沙盒:https://codesandbox.io/s/stupefied-euclid-utp7i

Answer 1

如果将按钮移动到图像上方，您可以创建一个在按钮悬停时应用的 CSS 规则:

.btn:hover + a > img {
背景:#b2b2b9；
不透明度:0.5；
}

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