Tips for displaying icons in a row when hovering my mouse

I'm trying to incorporate feather icons into my project, specifically the trash icon to appear next to the item name when I hover over it.

I found someone else asking a similar question on Stacks, but unfortunately, they didn't receive an answer.

Icons Only Appearing When Hover

Here's a snippet of my code:

<div class="container-fluid">
 <div class="table-responsive">
    <table class="table table-striped table-sm table-hover">
      <thead>
        <tr>
          <th class=" text-center">Item#</th>
          <th class=" text-center">Item Name</th>
          <th class=" text-center">Qty</th>

      </thead>
      <tbody>
        <tr>
          <td>1,001</td>
          <td>Apple</td>
          <td class=" text-right">5</td>

        </tr>
        <tr>
          <td>1,002</td>
          <td>Kidney Beans</td>
          <td class=" text-right">3</td>

        </tr>

https://i.sstatic.net/hJzvh.png

javascriptjquerycssbootstrap-4

Answer №1

The main idea: 

tr .fa {                            /* row not selected */
  opacity: 0;
  transition: opacity .2s ease-out; /* adding transition for better user experience */
  cursor: pointer;                  /* change cursor when hovering over icon */
  transition-delay: .5s;            /* delay the fading out of the icon */
}

tr:hover .fa {                      /* row selected */
  opacity: 1;
  transition-delay: 0s;             /* remove delay when entering */
}

In a basic form: 

tr .fa {
  opacity: 0;
}
tr:hover .fa {
  opacity: 1;
}

Example of implementation: 

tr .fa {
  margin-right: .5rem;
  opacity: 0;
  transition: opacity .2s ease-out;
  cursor: pointer;
  transition-delay: .5s;
}
tr:hover .fa {
  opacity: 1;
  transition-delay: 0s;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container-fluid">
 <div class="table-responsive">
    <table class="table table-striped table-sm table-hover">
      <thead>
        <tr>
          <th class=" text-center">Item#</th>
          <th class=" text-center">Item Name</th>
          <th class=" text-center">Qty</th>

      </thead>
      <tbody>
        <tr>
          <td>1,001</td>
          <td><i class="fa fa-trash"></i>Apple</td>
          <td class=" text-right">5</td>
        </tr>
        <tr>
          <td>1,002</td>
          <td><i class="fa fa-trash"></i>Kidney Beans</td>
          <td class=" text-right">3</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Feel free to adjust the selectors as needed to avoid affecting other elements and to match your current HTML structure.
If necessary, replace the .fa selector with [data-feather].

Answer №2

  1. Include a new class in your icon element
  2. Conceal it by applying the style attribute style="visibility: hidden;"
  3. Integrate a hover animation in your CSS stylesheet: 
    .youriconstyle:hover {visibility: visible;}

Answer №3

Utilizing the jQuery hover technique can assist you in achieving your goal. Initially, you must make some HTML adjustments such as creating a designated container for the icon. For example:

      <td class="trigger-icon">
         Apple 
         <span class="icon-container"> </span>
      </td>

Next, for the JavaScript portion,

    $(".trigger-icon").hover(function(){
     $(".icon-container").append('<i data-feather="trash"></i>');
    }, function(){
     $(".icon-container").empty();
    });

In order for the feather icon to be functional,

   $(".trigger-icon").hover(function(){
     $(".icon-container").append('<i data-feather="trash"></i>');
     feather.replace();
    }, function(){
     $(".icon-container").empty();
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I efficiently fetch data from Firebase, manipulate it through computations, and present it using React Hooks?

I am currently working on retrieving multiple "game" objects from Firebase Storage, performing statistical calculations on them, and then presenting the game statistics in a table. Here is an overview of my code structure: function calculateTeamStatistics( ...

javascriptreactjsfirebaseasync-awaitfirebase-storage

Tips for transferring information from the server to the client using Express

I am working on creating a webpage for my website that displays the names of all users. However, I am facing an issue with the fetch() function when trying to retrieve data from the server. <!DOCTYPE HTML> <html lang="en"> <head> ...

javascriptnode.jsexpressbackend

Is there a way to access the body html element within a template in vue.js?

I'm struggling to add styles to the body element of my HTML page. It seems like I can't access it directly from the template because there's another body element nested inside the main body. Even when I try to change the style using JavaScri ...

javascripthtmlvue.js

The AJAX request is not being initiated

Upon completion of the animation, I initiate an ajax call as demonstrated below. However, for some reason, the ajax call does not seem to be executing at all. The php file responsible for processing the ajax request is not receiving any data. I am puzzle ...

jqueryajax

Bootstrap troubleshoot: Solving grid and card complications

I have nearly completed a crucial section in my Django project by implementing panels that contain a set of cards. Using Bootstrap 3 (BS3), I have integrated cards from BS4 into BS3. Encountering a peculiar issue, I seek advice from the community due to t ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Error in GLSL file: "Module parsing error: Unexpected symbol"

I'm currently working on creating a custom image transition using a shader, and I require a fragment.glsl file for this purpose. However, when I try to import this file into my .js file, I encounter the following error: Compiled with problems: ERROR ...

javascriptimportthree.jsglsl

Is it possible to obtain the X-Y coordinates of the ray collision location in relation to the targeted face?

I have been working on determining the ray collision coordinate in relation to the targeted face... The following is my code snippet: var fMouseX = (iX / oCanvas.width) * 2 - 1; var fMouseY = -(iY / oCanvas.height) * 2 + 1; //Utilizing OrthographicCamer ...

javascriptthree.js

Tips for setting the background image of the body once the image has finished loading

On my website, I have decided to incorporate high-resolution images as the background for the body. However, when I use document.body.style.backgroundImage = "url('URL OF PICTURE')";, the image loads vertically down the page which is not ideal. I ...

javascriptjqueryhtmlcss

A step-by-step guide on leveraging NodeJS and Express to stream various local videos

I need to implement the functionality where users can select different videos to stream on my front-end. To achieve this, I have set up NodeJS and Express. The video content is sourced from 'http://localhost:4201/video'. Below is the code snippe ...

javascriptnode.jsexpresshtml5-videofs

jquery scroll navigation bar implementation

I have implemented a jQuery function for the bar to follow when scrolling up and down, but there seems to be a delay in its execution due to CSS styling: #rightbar_scroll { position: absolute; top: 0; right: 0; z-index: 10000; } jQuery(docume ...

phpjqueryrequirejs

What is the best way to monitor React hooks efficiently?

Prior to diving into a new React project, I always make sure that there are adequate developer tools available for support. One of my favorite features in React is the React Developer tool for Google Chrome. It allows me to examine the internal state of e ...

javascriptreactjsreact-hooks

Center the image and align the floated texts on each side horizontally

I've recently started learning about HTML and CSS, but I'm having trouble grasping one concept. My goal is to align two floating <p> elements on either side of a centered <img>. Here's an example of what I'm trying to achiev ...

htmlcss

Updating nested arrays using mongoose

I'm currently facing an issue while trying to update the value of an object using $ set in order to pass an Object into a nested array element. The problem is that the first element is updated instead of the one I am querying. I'm unsure about wh ...

javascriptnode.jsmongodbmongoosemongodb-query

Are you interested in removing a user account?

As a newcomer, I'm attempting to delete a profile but keep encountering this message in the address bar: http://thexyz.com/the/delete.php?id=1> I'm wondering if I've made a syntax error in my code below- <?php $i=1; while( ...

javascriptphpajax

Automating Alert Handling in Selenium WebDriver: Handling Multiple PopUps with Ease

Web Address: Test Page URL: On the test page, follow these steps: 1) Input a numerical value in the field labeled as "customer id" 2) Click on the button labelled as "Submit" 3) After seeing an alert message, press "OK" using the following code snippe ...

javascriptjavaselenium

I'm curious as to why my form fields disappear even when they have not been selected

Illustration of Form Fields Disappearing When Unselected Greetings, I'm encountering an issue where my form fields disappear when not selected. I'm utilizing Crispy Forms to render the form, following a tutorial on YouTube. This functionality w ...

pythonhtmldjangobootstrap-4django-crispy-forms

"Upon returning from a child component, the React component's method 'this.state.myState'

In my React code, I have a Parent component called BookApplication and a child component called SearchBox. The SearchBox contains an input field that should pass the input back to the parent component for event handling. The data flow seems to be working c ...

javascriptreactjs

Adding a character sequence to a parsed JSON object results in a literal string outcome

I have saved some currency information in the state manager of my app and here is how I am accessing it: For example, to retrieve the value of Euro against the dollar, I use the following code: JSON.parse(this.$store.state.clientSide.currencyrates).rates. ...

javascriptvue.js

Utilizing *ngIf for Showing Elements Once Data is Completely Loaded

While working on my Angular 2 app, I encountered an issue with the pagination UI loading before the data arrives. This causes a visual glitch where the pagination components initially appear at the top of the page and then shift to the bottom once the data ...

javascriptangulartypescript

Scaling up the window size in Scalatest PlusPlay Selenium is causing resizing issues

After spending a good amount of time on this, I am struggling to figure out how to resize a window using scalatest plus. I have searched online and looked through the documentation at The method I found is executeScript("window.resizeTo(700, 700);") ...

javascriptscalaseleniumscalatest