# Highlight row on mouseover with Inputs.table

**URL:** <https://talk.observablehq.com/t/highlight-row-on-mouseover-with-inputs-table/10505>\
**Category:** Help\
**Created:** [September 5, 2025, 9:47am UTC](https://talk.observablehq.com/t/highlight-row-on-mouseover-with-inputs-table/10505 "2025-09-05T09:47:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![a-fanning](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/a-fanning/32/9640_2.png) [@a-fanning](https://talk.observablehq.com/u/a-fanning)\
**Post date:** [September 5, 2025, 9:47am UTC](https://talk.observablehq.com/t/highlight-row-on-mouseover-with-inputs-table/10505/1 "2025-09-05T09:47:57Z")

</div>

Hi there,

I would like to add a bit of interactivity to a simple table created with `Inputs.table` by adding the common functionality of a row being ‘highlighted’ on mouseover. Is there an easy way to do this? Thx!

Here is the notebook I am working on: [Social foundation / Andrew Fanning | Observable](https://observablehq.com/d/1562bdd9c67de3e7)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [September 5, 2025, 10:12am UTC](https://talk.observablehq.com/t/highlight-row-on-mouseover-with-inputs-table/10505/2 "2025-09-05T10:12:02Z")

</div>

you could try css:

```auto
<style>.inputs-3a86ea-table tr:hover {background: #f2f2f2}</style>

```

---

<div class="post-metadata">

**Author:** ![a-fanning](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/a-fanning/32/9640_2.png) [@a-fanning](https://talk.observablehq.com/u/a-fanning)\
**Post date:** [September 5, 2025, 10:36am UTC](https://talk.observablehq.com/t/highlight-row-on-mouseover-with-inputs-table/10505/3 "2025-09-05T10:36:13Z")

</div>

@Fil Thanks a lot, this works on the Observable platform but doesn’t seem to carry across to a webpage embed (as URL is the only option for me, iframe or Runtime are not possible). I’m sure it’s just a matter of declaring things correctly, need to improve my html/css 🙂

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [September 5, 2025, 4:21pm UTC](https://talk.observablehq.com/t/highlight-row-on-mouseover-with-inputs-table/10505/4 "2025-09-05T16:21:45Z")

</div>

> [@a-fanning](#):
>
> works on the Observable platform but doesn’t seem to carry across to a webpage embed

You’ll need to name and embed the style directive as well:

https://observablehq.com/embed/530cfaf63ea2b94f?cells=socialTable%2Cstyle

---

<div class="post-metadata">

**Author:** ![a-fanning](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/a-fanning/32/9640_2.png) [@a-fanning](https://talk.observablehq.com/u/a-fanning)\
**Post date:** [September 6, 2025, 7:41am UTC](https://talk.observablehq.com/t/highlight-row-on-mouseover-with-inputs-table/10505/5 "2025-09-06T07:41:21Z")

</div>

Thank you, this does the trick!