Displaying text and concealing image when hovering over a column in an angular2 table

Question

Displaying text and concealing image when hovering over a column in an angular2 table

I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the image and hiding the text) without requiring a hover.

app.html

 <tbody>
    <tr *ngFor="let item of mf.data">

      <td >{{item.Title}}</td>
      <td>{{item.CustomerName}}</td>
      <td>{{item.ModifiedDate | date}}</td>
      <td>{{item.RegionId}},{{item.City}}{{item.Country}}</td>
      <td>{{item.BidStatus}}</td>
      <td>
      <label class="col-text"><img src="../../../../assets/app-icons/view.png">View</label>
      </td>
    </tr>
    </tbody>

The last column contains the label and image, but I want to hide the text. The text should only appear when hovering over the image. This functionality should apply specifically to the hovered image column and not affect other columns with images.

By default, the image is shown https://i.sstatic.net/966Ov.png

When the user hovers over it, the text "View" will be displayed https://i.sstatic.net/Gx8ag.png

html css angular class ng-style

Answer 1

Answer №1

Here is a simple solution for your issue... include the following code snippet in your HTML:

<div class="wrapper">
  <p>This is a text.</p>
</div>

Also, remember to add the corresponding CSS styles:

.wrapper {
  p {
    display: none;
  }
}

.wrapper:hover {
  p {
   display: none;
  }

  span {
    display: inline-block; /* or any other desired value */
  }
}

Answer 2

Here is a simple solution for your issue... include the following code snippet in your HTML:

<div class="wrapper">
  <p>This is a text.</p>
</div>

Also, remember to add the corresponding CSS styles:

.wrapper {
  p {
    display: none;
  }
}

.wrapper:hover {
  p {
   display: none;
  }

  span {
    display: inline-block; /* or any other desired value */
  }
}

Displaying text and concealing image when hovering over a column in an angular2 table

Answer №1

Similar questions

Differences in SVG rendering between Chrome and Firefox

Custom Component in React Bootstrap with Overflowing Column

Understanding the reasoning behind the back button

How can the "Search within page" feature locate words that are divided between different elements?

The document.write function in JavaScript is malfunctioning

Filtering a multi-dimensional array in Ionic 3

Transitioning the font stack from SCSS to JSS (cssinjs)

Tips for setting uniform line-height across an entire project by adding a fixed value to the font size

Instructions on retrieving keyboard input values from Angular's Material Datepicker using Reactive Forms

Browsing HTML Documents with the Click of a Button

No JavaScript needed for this CSS framework

Using Angular to make a DELETE request using HttpClient with a Json Server

Experiencing an array of issues while attempting to convert my HTTP request into an

Angular component classes now use the updated RXJS 6.X syntax, rendering the previously used observable deprecated

Retrieving the current value of the selected option using JQuery

What is the method for inserting a vertical line between two div elements?

Selenium: A guide to specifying CSS for webpages with multiple elements sharing the same name

What is the purpose of the Angular Material dashboard schematic boilerplate code?

What causes the bootstrap grid system to deviate from the intended column sizes?

I'm looking for a method to retrieve the value of an option tag and then pass it to a helper within handlebars. Can someone