# Data cell light up effect on mouse rollover

**URL:** <https://forum.kirupa.com/t/data-cell-light-up-effect-on-mouse-rollover/62961>\
**Category:** Uncategorized\
**Created:** [September 1, 2004, 10:39pm UTC](https://forum.kirupa.com/t/data-cell-light-up-effect-on-mouse-rollover/62961 "2004-09-01T22:39:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![the\_transporter](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@the\_transporter](https://forum.kirupa.com/u/the_transporter)\
**Post date:** [September 1, 2004, 10:39pm UTC](https://forum.kirupa.com/t/data-cell-light-up-effect-on-mouse-rollover/62961/1 "2004-09-01T22:39:01Z")

</div>

Hi,

Do any of you guys know what language I need to use to make each content cell change colour when a mouse rollovers it?

For this site, [http://individual.utoronto.ca/ckcj/fmm/fmm.htm](http://individual.utoronto.ca/ckcj/fmm/fmm.htm) notice how there’s content under each header? How would I make the background colour change when I rollover the text with my mouse cursor?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 2, 2004, 9:44pm UTC](https://forum.kirupa.com/t/data-cell-light-up-effect-on-mouse-rollover/62961/2 "2004-09-02T21:44:04Z")

</div>

What language? Thats Java Script, but you can do it with CSS too.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 3, 2004, 2:02pm UTC](https://forum.kirupa.com/t/data-cell-light-up-effect-on-mouse-rollover/62961/3 "2004-09-03T14:02:00Z")

</div>

Yep, CSS is the way to go here.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 4, 2004, 5:25pm UTC](https://forum.kirupa.com/t/data-cell-light-up-effect-on-mouse-rollover/62961/4 "2004-09-04T17:25:02Z")

</div>

Here’s an example.

First, you need a style definition for what you cant to have happen when you rollover. Here, I just made the background red.

```auto
<style type="text/css">
.hvbg {
	background-color:#FF0000;
}
</style>

```

Next, you need to define in your table cell what happens on rollover and rollout. Here, when you rollover, the table row style is set to what we defined above, and on rollout reverts to the default style.

```auto
<table width="400">
<tr onmouseover="this.className='hvbg';" onmouseout="this.className='';">
<td>Stuff goes here</td><td>More stuff goes here</td>
</tr>
</table>

```

Here is a similiar example, except here this is only applied to the table cell rather than the whole row.

```auto
<table width="400">
<tr>
<td onmouseover="this.className='hvbg';" onmouseout="this.className='';">Stuff goes here</td><td>More stuff goes here</td>
</tr>
</table>

```

Hope it helps! 🍺