CODEWITHSUNDEEP
htmlcssangulartypescripthover
kameholic1582
kameholic1582

Reputation: 155

How to make icons visible in a html table row?

I have a HTML table with 5 columns, where in the last column if I hover the mouse over the table, 3 icons will shop up at the end of the cell.

My only problem is that I don't want these 3 icons to show up in every row, just in the row where my mouse is. How can I solve this?

I must not use AngularJS, Angular Material, JavaScript or Bootstrap or any 3rd party thing.

I tried using a span for every icon but that didn't solve my issue.

This is the part of my table where it is confusing:

<tr *ngFor="let item of items">
      <td>
        <span class="normalColumn"> {{ item.firstname }}</span>
      </td>
      <td>
        <span class="normalColumn"> {{ item.lastname }}</span>
      </td>
      <td>
        <span class="normalColumn"> {{ item.email }}</span>
      </td>
      <td>
        <span class="normalColumn" *ngFor="let roleId of item.roleIds">
          {{ getUserRole(roleId).name }}</span
        >
      </td>
      <td>
        <span class="left">
          {{
            item.lastLoginDate
              ? (item.lastLoginDate | fromnow)
              : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
          }}
        </span>
        <span class="only-show-on-hover">
          <my-icon [icon]="Icon.edit"></my-icon>
          <my-icon [icon]="Icon.password"></my-icon>
          <my-icon [icon]="Icon.delete"></my-icon>
        </span>
      </td>
    </tr>

Upvotes: 3

Views: 5626

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Try like this:

Working Demo

<table class="table table-bordered">
    <ng-container *ngFor="let item of items;let i = index">
        <tr (mouseover)="rowIndex = i" (mouseleave)="rowIndex = null">
            <td>
                <span class="normalColumn"> {{ item.firstname }}</span>
            </td>
            <td>
                <span class="normalColumn"> {{ item.lastname }}</span>
            </td>
            <td>
                <span class="normalColumn"> {{ item.email }}</span>
            </td>
            <td>
                <span class="normalColumn" *ngFor="let roleId of item.roleIds">
          {{ getUserRole(roleId).name }}</span>
            </td>
            <td>
                <span class="left">
          {{
            item.lastLoginDate
              ? (item.lastLoginDate | fromnow)
              : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
          }}
        </span>
                <span class="only-show-on-hover" *ngIf="rowIndex == i">
          <my-icon [icon]="Icon.edit"></my-icon>
          <my-icon [icon]="Icon.password"></my-icon>
          <my-icon [icon]="Icon.delete"></my-icon>
        </span>
            </td>
        </tr>
    </ng-container>
</table>

Upvotes: 4

Paulie_D
Paulie_D

Reputation: 115108

You just need the correct selector in this case the "sibling" combinator ~

td {
  border: 1px solid grey;
}

td:hover {
  background: lightgreen;
}

td span {
  visibility: hidden;
}

td:hover~td span,
td:hover span {
  visibility: visible;
  background: lightblue;
}
<table>
  <tr>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td><span>Icons</span></td>
  </tr>
  <tr>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td><span>Icons</span></td>
  </tr>
</table>

Upvotes: 1

Related Questions