# How to override DashTable --hover value

**URL:** <https://community.plotly.com/t/how-to-override-dashtable-hover-value/66431>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [July 25, 2022, 8:08pm UTC](https://community.plotly.com/t/how-to-override-dashtable-hover-value/66431 "2022-07-25T20:08:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mswer](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@mswer](https://community.plotly.com/u/mswer)\
**Post date:** [July 25, 2022, 8:08pm UTC](https://community.plotly.com/t/how-to-override-dashtable-hover-value/66431/1 "2022-07-25T20:08:15Z")

</div>

Hi,

I would like to override the default “–hover” colour value in DashTable.

I tried using the following to no avail:

> style\_table={“–hover”:“#223344”}

and

> style\_table={“hover”:{“backgroundColor”:“#223344”}}

and

> css={  
> “selector”: “.dash-spreadsheet-container”, “rule”:‘–hover:“#223344”’  
> }

What would be the correct way of doing this?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 25, 2022, 10:35pm UTC](https://community.plotly.com/t/how-to-override-dashtable-hover-value/66431/2 "2022-07-25T22:35:38Z")

</div>

Hi @mswer

If you would like to change the entire row on hover, you can try adding this to the .css file in the `assets` folder

```auto
.dash-spreadsheet tr:hover td.dash-cell {
            border-color: lightgrey !important;
            border-width: 0.5px !important;
            background-color: red !important;
            color: white !important;
         }

```

If you would just like to change the color when you hover over the active cell, try:

```auto

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  --hover: red !important;
}

```

---

<div class="post-metadata">

**Author:** ![mswer](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@mswer](https://community.plotly.com/u/mswer)\
**Post date:** [July 26, 2022, 5:49am UTC](https://community.plotly.com/t/how-to-override-dashtable-hover-value/66431/3 "2022-07-26T05:49:19Z")

</div>

Thank you @AnnMarieW. The first option was what I needed. Just needed to add a second block to also adjust the header hover color:

> .dash-spreadsheet tr:hover th.dash-header {  
> border-color: lightgrey !important;  
> border-width: 0.5px !important;  
> background-color: black !important;  
> color: white !important;  
> }