How to highlight a single cell when mouse is hovered over the cell

This article explains how to highlight a single cell created using Advanced Tables when the mouse hovers over the cell. There are two ways to accomplish this, "Using the CSS Stylesheet in Space" OR "Using the Advanced Tables app along with the HTML for Confluence app"

Using the CSS Stylesheet in Space

Instructions:

1. Log into your Confluence instance as a Confluence System administrator.
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 Plus screen, under Column settings and add the Column attributes as below.
   
   

   class=confluenceTd cellhover

   
   

5. Go to Space Tools and click Look and Feel.
6. Under Stylesheet tab, enter the CSS code.
   

7. Click Save.
    

   td.cellhover:hover{
   background-color:lightblue;
   }

8. Open the respective confluence page, hover the mouse over a cell.
   

Using Advanced Tables with the HTML for Confluence app

Instructions:

1. Log into your Confluence instance and follow Step 2 to Step 4 from the above set of instructions. 

2. Include the HTML for Confluence app and add the CSS code in the macro.
   

   td.cellhover:hover{
   background-color:lightblue;
   }

3. Click Save.
4. Open the respective confluence page, hover the mouse over a cell. The cell is displayed as shown below: