html - 在表格内，悬停在图像上，显示详细信息卡

Question

我有一个应用程序，我使用 quasar 框架，我使用带有 q-tr 和 q-td 的 q-table。我遇到的问题是，在表格的一列中，我显示了一个图像，并且在该图像的悬停时，我想使用 q-card 显示该对象的详细信息。此卡在表格中该图像的块内实现并显示逻辑，但卡的大小大于该块的大小。因此它不会显示表中该特定块之外的溢出部分。

我已经尝试过溢出：可见，z-index：1000，但我无法将卡放在前面。有什么建议么？

PS：当我设置位置：固定时，它显示整张卡并解决了这个问题，但是当我向下滚动时它不是动态的，所以它不是我想要的

这是我显示图像的块

<q-td key="image" :props="props">
       <template v-if="hasValue(props.row.image)">
          <q-img class="asset-img"
                :src="props.row.image" 
                @mouseover="hoverDetails($event, props.row.assetId)"
                @mouseleave="showHoverAssetDetails=false"
                :id="props.row.assetId" 
          >
            <!-- On hover of image, show the details of the asset -->
            <q-card v-if="showHoverAssetDetails && hoveredAsset==props.row.assetId" class="hover-asset-details-card">
              <!-- Header / Asset type of hovered image -->
              <div class="header">
                ...
              </div>
              <!-- Image and details of the asset -->
              <div class="body">
                <!-- Image -->
                <div class="img">
                  <q-img :src="props.row.image" style="max-width: 100%; max-height: 100%"/>
                </div>
                <!-- Details of hovered asset -->
                <div class="asset-info">
                  ...
                </div>
              </div>
            </q-card>
          </q-img>
        </template>
        <template v-else>
          N/A
        </template>
      </q-td>

这是我的CSS

.asset-img {
  width: 150px;
}
.hover-asset-details-card {
   display:inline-block;
   color:black;
   background:white;
   position:absolute;
   z-index: 1000;
   height: 250px;
   width: 500px;
   border-style: solid;
   border-width: 2px;
   border-radius: 10px;
}

标签： htmlcssvue.jsquasar