Display the icon exclusively when hovered over

I have a table with a column containing icons that I want to hide by default. I would like the icons to only appear when hovered over.

Here is the HTML code:

<table class="table table-hover">
  <tr>
    <th>From</th>
    <th>To</th>
    <th>Connecting Airport</th>
    <th>Comment</th>
    <th>Report</th>
  </tr>
  <tr>
    <td>JFK</td>
    <td>CPH</td>
    <td>ARN</td>
    <td>N/A</td>
    <td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
  </tr>
  <tr>
    <td>SFO</td>
    <td>EWR</td>
    <td>ORD</td>
    <td>N/A</td>
    <td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
  </tr>
</table>

For a live example, click on the link below:

https://jsfiddle.net/bce9a257/1/

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Forget using javascript for this task, a simple CSS snippet will suffice:

i.fa {
  display: none;
}
td:hover i.fa {
  display: inline-block;
}

Check out the updated demo here: https://jsfiddle.net/bce9a257/3/

If you prefer the icons to appear on hover of a row instead of a cell, you can achieve that with the following code:

i.fa {
  display: none;
}
tr:hover i.fa {
  display: inline-block;
}

update:
To target only the icons in your table, consider adding an id like flights to your table and adjusting the selectors like this: #flights i.fa (and #flights tr:hover i.fa)

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

Ensure that the JSON object exists before saving it to local storage

[ { "id": 1, "title": "my First Item", "body": "" }, { "id": 2, "title": "my Second Item", "body": "" }, { "id": 3, "title": "my Third Item", "body": "" } ] Do ...

javascriptjsonangularjs

What is the best way to dynamically insert a directive element between an already existing parent directive and its child directive?

Background: Working within the constraints of a custom CMS that limits access to the code base, I am exploring the option of using JavaScript for DOM manipulations in certain scenarios. Problem: The issue I am facing involves a container directive conta ...

javascripthtmlangularjsdomangular-directive

Exploring the integration of Selenium WebDriver with a Polymer website and its Shadow root functionality

When I use Google Chrome console, I can easily click on a Shadow root element using the following code: document.querySelector('html /deep/ next-tab').querySelector('a').click() However, when I tried to do the same thing with web-driv ...

javahtmlselenium

What is the meaning of "bootstrapping" as it relates to Angular 2?

I found a question that is similar to mine, but I think my case (with version 2) has enough differences to warrant a new discussion. I'm curious about the specific purpose of calling bootstrap() in an Angular 2 application. Can someone explain it to ...

javascriptangularjsangular

Exciting new functionality: JavaScript track currently playing

I currently have a continuous audio track playing music on my website. I am interested in adding a feature that displays text like this: "Now playing: (1st song name)" and then changes after a certain number of seconds "Now playing: (2nd song name)" Ev ...

javascriptaudio

Unlock the lightbox and send the user to the parent page

Is there a way to simultaneously launch a lightbox popup and redirect the parent page? I have an AJAX script that retrieves HTML content as a response. My goal is to display this content in a lightbox popup while also directing the parent window to a des ...

javascriptjqueryajaxlightbox

Oops! The file or directory you are looking for does not exist. Please check the location and try again

This is the content of my server.js file: var express = require('express'), app = express(); app .use(express.static('./public')) .get('*',function (req,res) { res.sendfile('/public/main.html' ...

javascripthtmlangularjsnode.js

Determine the previous day's date using JavaScript by subtracting one day

I am facing an issue while attempting to store a specific date format in MongoDB. Instead of saving the date as intended, it is consistently registering a day earlier than specified. For instance - db.test.insert({name: "test1", dob: new Date(1986, 11, ...

javascriptnode.jsdate

Using jQuery to transfer URL parameters to another page

I have successfully implemented a function to transfer information from checkboxes to the URL using the following code: jQuery $('input[type="checkbox"]').on('change', function(e){ var data = $('input[type="checkbox"]'). ...

jquery

Having numerous bxsliders implemented in a Genesis child theme

I'm currently working on incorporating multiple bxsliders through custom fields in a wp genesis child theme. The initial slider was successfully implemented using the following function within the genesis child theme functions: add_action('genes ...

javascriptjquerywordpressbxslider

Navigating directly to a page in ReactJS and Redux without needing to login if a token is found in the local storage

Currently in the main component, it is set to automatically redirect to the Login page. However, I want to implement a check to see if a token is already stored in the local storage. If a token exists, I want the application to skip the Login page and dire ...

javascriptreactjscookiesreduxreact-redux

Click on the login button once the field has reached its maximum length

I need assistance with a login form that has a maximum length of 4 characters for both empNum and ssn. Below is the code snippet: <input type="text" id="empNo" name="empNo" style="width: 90px; margin-left: 10px" maxlength="4" onkeyup="nextField(this, & ...

javascriptjqueryjquery-ui

Is there a way in HTML to navigate directly to a specific element on another page, even if it is not currently visible

I have used an anchor to navigate to a specific element on another page from the current page. However, the specific element I want to navigate to is not currently visible because it is controlled by JavaScript to keep the page short. The element is only s ...

javascripthtml

NameError: The 'find_all' attribute cannot be found in the object of type 'NavigableString' (AttributeError)

import requests from bs4 import BeautifulSoup url=("http://finance.naver.com/news/mainnews.nhn") r=requests.get(url) soup=BeautifulSoup(r.content) a_data = soup.find_all("li",{"class":"block1"}) for item in a_data: print item.contents[0].find_all("d ...

pythonhtmlbeautifulsoupscrapy

The user uploads an image to the server, which is then assigned as the background-image for a div element

I am in search of a straightforward method to allow users to upload an image to my server and then use that uploaded image as the background-image for a div element. I need the image to be actually uploaded to the server rather than just displaying a local ...

htmlajaximagebackgroundupload

Are module.exports and export interchangeable?

Imagine you're creating an npm library and you need to export your functions. Here's one way to do it: function a(){ } If you want to export them locally, you could do it like this: export function a(){ } Alternatively, you could achieve the ...

javascriptnode.jsnpm

Steps to hide a div with jQuery when a user clicks outside of a link or the div itself:1. Create a click event

Here's a simple question - I have a link that when clicked, displays a div. If the user clicks away from the link, the div is hidden, which is good. However, I don't want the div to be hidden if the user clicks on it. I only want the div to disap ...

javascriptjquery

Ensure consistency across browsers by disabling zoom functionality on touchpad inputs while still permitting scrolling actions

I am looking for a way to disable 2-finger zoom on trackpad "wheel" events while still allowing 2-finger scroll. On mobile, I have already disabled zoom with: <meta name="viewport" content="initial-scale=1, minimum-scale=1, m ...

javascripthtmlmacosbrowsertrackpad

What is the best way to integrate Halfmoon's JS from npm into my current code using Gulp?

I am eager to incorporate the Halfmoon framework into a personal project and have successfully downloaded it through npm. To utilize the example JavaScript provided on this page (found at ), I need to import the library using a require statement. var halfm ...

javascriptnode.jsnpmgulphalfmoon

Converting a JavaScript function to work in TypeScript: a step-by-step guide

When writing it like this, using the this keyword is not possible. LoadDrawing(drawing_name) { this.glg.LoadWidgetFromURL(drawing_name, null, this.LoadCB,drawing_name); } LoadCB(drawing, drawing_name) { if (drawing == null) { return; ...

javascriptangulartypescript