Bulma: Show card on hover table cell?-CodePudding

I'm trying to display a Bulma card when user hovers a certain cell in a table, but I can't get it to work.

My own CSS file to complement the Bulma framework:

  .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);

Then some HTML:

      <td ><div >
        <div >
          <div >
            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>

Is it not possible to display the Bulma card on hover?

CodePudding user response：

your selector should be .has-details:hover .details

your td should match two constraints :

be embed in a table
have a content to be hoverable

.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 >
hover me
  <div >
    <div >
      <div >
        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>

CodePudding user response：

There is no span tag in your code!look:

   <td >
    <div >
     <div >
      <div >
        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>