google-app-maker - 谷歌 Appmaker 中网格单元的悬停阴影类似于环聊通话 Profile Pic 悬停

Question

我有一个网格小部件，它在其网格单元格的数据表中显示项目名称和图像链接。当我将鼠标悬停在网格单元格上时，我希望在数据表中显示带有项目描述的阴影。请建议我如何实现它。

Answer 1

您可以按照以下步骤实现所需的行为：

1. 在单元格内添加一个面板
2. 将面板布局为覆盖整个单元格（将顶部、底部、左侧、右侧设置为 0，宽度高度设置为自动或“填充父级”的宽度和高度，如果您使用的是 flex 布局）
3. 将您需要的小部件（带有描述的标签）添加到此“悬停”面板
4. 取消选中“可见”面板的属性
5. 添加 CSS 样式以在单元格鼠标悬停时显示面板

.app-Items-GridItemsCell:hover .app-Items-PanelHover {
  display: flex !important;
  opacity: 0.5;
}

那应该是诀窍。这是示例应用程序的链接： AM Cell Hover Effect