Bulma：在悬停 table 单元格时显示卡片？

Question

我试图在用户将鼠标悬停在 table 中的某个单元格时显示 Bulma 卡片，但我无法让它工作。

我自己的 CSS 文件来补充 Bulma 框架：

  .has-details {
    position: relative;
  }



  .details {
    position: absolute;
    top: 0;
    transform: translateY(70%) scale(0);
    transition: transform 0.1s ease-in;
    transform-origin: left;
    display: inline;
    background: white;
    z-index: 20;
    min-width: 100%;
    padding: 1rem;
    border: 1px solid black;
  }



  .has-details:hover span {
    transform: translateY(70%) scale(1);

然后一些 HTML:

      <td class="has-details has-background-danger"><div class="details card">
        <div class="card-content">
          <div class="content">
            Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
          </div>
        </div>
      </div></td>

布尔玛卡悬停不显示吗？

Answer 1

您的选择器应该是 .has-details:hover .details

你的 td 应该匹配两个约束：

嵌入 table
有内容可以悬停

.details {
    position: absolute;
    top: 0;
    transform: translateY(70%) scale(0);
    transition: transform 0.1s ease-in;
    transform-origin: left;
    display: inline;
    background: white;
    z-index: 20;
    min-width: 100%;
    padding: 1rem;
    border: 1px solid black;
}

.has-details:hover .details {
    transform: translateY(70%) scale(1);
}

<table>
<td class="has-details has-background-danger">
hover me
  <div class="details card">
    <div class="card-content">
      <div class="content">
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </div>
    </div>
  </div>
</td>
</table>

Answer 2

你的代码中没有span标签！看：

   <td class="has-details has-background-danger">
    <div class="detailscard">
     <div class="card-content">
      <div class="content">
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </div>
     </div>
   </div>
  </td>

Bulma：在悬停 table 单元格时显示卡片？

Bulma: Show card on hover table cell?

html

css

bulma