# Cell mouseover

**URL:** <https://forum.kirupa.com/t/cell-mouseover/96368>\
**Category:** Uncategorized\
**Created:** [December 8, 2003, 4:45pm UTC](https://forum.kirupa.com/t/cell-mouseover/96368 "2003-12-08T16:45:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![imagined](https://avatars.discourse-cdn.com/v4/letter/i/a87d85/32.png) [@imagined](https://forum.kirupa.com/u/imagined)\
**Post date:** [December 8, 2003, 4:45pm UTC](https://forum.kirupa.com/t/cell-mouseover/96368/1 "2003-12-08T16:45:41Z")

</div>

Hello everyone!

I’m new at the forum. Question:  
how can i do a mouseover effect on the cells like in [macromedia.com](http://macromedia.com)?

I want the mouseover effect to change the background color of not only the text but of the whole cell. How could I do that?

Please help me, thanks,

Leo

---

<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:** [December 10, 2003, 7:33pm UTC](https://forum.kirupa.com/t/cell-mouseover/96368/2 "2003-12-10T19:33:14Z")

</div>

I have been playing w/the cells and the CSS. Your suggestions work great. Now, I wanted to use CSS. But here’s the problem.

I have a CSS file and define properties for links, like this:

A:link  
{  
font-family: Verdana;  
font-size: 8pt;  
color: red;  
font-weight: bold;  
font-style:normal;  
text-decoration:none;  
}  
A:active  
{  
font-family: Verdana;  
font-size: 8pt;  
color: red;  
font-weight: bold;  
font-style:normal;  
text-decoration:none;  
}  
A:visited  
{  
font-family: Verdana;  
font-size: 8pt;  
color: red;  
font-weight: bold;  
font-style:normal;  
text-decoration:none;  
}  
A:hover  
{  
color:#003399;  
font-size:8pt;  
font-family:tahoma;  
font-style:normal;  
text-decoration:none;  
background-color:#ccffff;  
}

And then, I define properties for the cell like you said like this:

```
.norm
{
background-color: #FF9933;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
font-style: normal;
line-height: normal;
font-variant: normal;
text-decoration: none;
vertical-align: middle;
border: none;
cursor: hand;
}

```

.over  
{  
background-color: #FFD0A0;  
color: #000080;  
font-family: tahoma;  
font-size: 8pt;  
font-style: normal;  
line-height: normal;  
font-weight: bold;  
font-variant: normal;  
text-decoration: none;  
vertical-align: middle;  
cursor: hand;  
}

But, the links are not white or blue, instead they look purple or whatever color is defined in the link “\<A\>” property. But I want the links on the cell to look one color and the links on the body another color. How can I do this? Is it better to make a unbulleted list instead of the cells? If so, how can I do that?

Thanks!

Leo

---

<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:** [December 10, 2003, 7:42pm UTC](https://forum.kirupa.com/t/cell-mouseover/96368/3 "2003-12-10T19:42:21Z")

</div>

if you want to use the style as specified in the table style and not the link style then dont make the text in your table a link. Keep it regular text. Since you have the cursor of the cell to be a hand, its already assumed that the entire cell is in fact a link, so use that cell (and not the text) as the link skipping the a (anchor) tag altogether and instead just using an onClick for the table cell.

```php
<table width="100" border="0"><tr>
    <td class="norm"
onmouseover="this.className='over'"
onmouseout="this.className='norm'"
onClick="location.href='http://www.kirupa.com'">Link</td>
</tr></table>

```

---

<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:** [December 10, 2003, 7:57pm UTC](https://forum.kirupa.com/t/cell-mouseover/96368/4 "2003-12-10T19:57:20Z")

</div>

There is a way using just CSS.

```php

<style type="text/css">
.norm a:hover {
color:#567567;
}
</style>

```

Then, only \<a\> elements contained in an element of class “norm” will be selected 🙂

---

<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:** [December 10, 2003, 8:05pm UTC](https://forum.kirupa.com/t/cell-mouseover/96368/5 "2003-12-10T20:05:54Z")

</div>

MAN! you guys are awesome!

Thanks!

Leo