How to highlight the cells of a table on mouse hovers around the cell

This article explains how to highlight cells of different tables with different colors created using Advanced Tables, one color each for a given table when the mouse hovers over a cell. To achieve this, we would have to use the CSS Stylesheet which exists in the Confluence Space Administrator section apart from the Global Stylesheet.

Instructions:

1. Log into your Confluence instance as an administrator ensuring the user has the space administrator access.
2. Navigate to the existing page and click  to edit the page or create a new page.
3. Insert Advanced Table -Table Plus macro. For example, create a table as shown below:
   
   

4. Edit the macro on the Advanced Tables Editor-Table Plusscreen, under Column settings and add the Column attributes as below.
   Note: The table class should be different for each table.
   
   Sales Statistics table:
   

   class=confluenceTd cellhover

   Product details:

   class=confluenceTd cellhover1

   Data:

   class=confluenceTd cellhover3

   

5. Now, go to Space Tools and click on Look and Feel.

6. Under Stylesheet tab, enter the CSS code and click Save.
   
    Find the CSS code below:

   td.cellhover:hover {
   background-color: lightblue;
   }
   
   
   td.cellhover1:hover {
   background-color: red;
   }
   
   td.cellhover3:hover {
   background-color: green;
   }
   
   

7. Open the respective confluence page and hover the mouse over the cells in different tables. Notice that cells from different tables show different colors when the cell hovers around the one cell.