Highlight row on mouseover with Inputs.table

Community Help
1

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

1 Like
2

you could try css:

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

@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 :slight_smile:

1 Like
4

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

2 Likes
5

Thank you, this does the trick!

1 Like