Using hover in CSS

Hey guys,

I have a bit of code here:

<table style="line-height: 1.6em; margin-left: 5px; margin-right: 0px; margin-bottom: 5px; border-top: 1px solid #aaa; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; padding="0" cellspacing="0" width="100%">
<tbody>

<tr>
<th style="padding: 0px; margin-right: 0px; color: #222; line-height: 1.1em; background-color: #d5dae0; border-bottom: 1px solid #aaa; scope="col">Products</th>
<th style="padding: 0px; margin-right: 0px; color: #222; line-height: 1.1em; background-color: #d5dae0; border-bottom: 1px solid #aaa; scope="col">Product Descriptions</th>
<th style="padding: 0px; margin-right: 0px; color: #222; line-height: 1.1em; background-color: #d5dae0; border-bottom: 1px solid #aaa; scope="col">Prices</th>
</tr>

<tr style="background-color: #f0f1f2;">
<td style="border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; font-family: sans-serif; font-size: 12px; font-weight: bold; height="50" width="50"><img src="" alt="" ></td>
<td style="border-bottom: 1px solid #aaa;"><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Ericsson W810i Crystal Protector Case (Smoke)</a></td>
<td style="border-bottom: 1px solid #aaa;" align="center">price</td>
</tr>

<tr>
<td style="border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; font-family: sans-serif; font-size: 12px; font-weight: bold; height="50" width="50"><img src="" alt="" ></td>
<td style="border-bottom: 1px solid #aaa;"><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Ericsson W810i Crystal Protector Cases (Blue)</a></td>
<td style="border-bottom: 1px solid #aaa;" align="center">price</td>
</tr>

<tr>
<td style="border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; font-family: sans-serif; font-size: 12px; font-weight: bold; height="50" width="50"><img src="" alt="" ></td>
<td style="border-bottom: 1px solid #aaa;"><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Ericsson W810i Crystal Protector Case (Red)</a></td>
<td style="border-bottom: 1px solid #aaa;" align="center">price</td>
</tr>

</tbody>
</table>


Now on the 15th line where u have the <tr style="background-color: #f0f1f2;">
I want to have it so that when you mouse over the row you get the background color #f0f1f2..
Can this be dont using the <tr style= ?
reason is that this bit of code is going on a site that quite complex and already has its own .css file to reference to and I dont want to edit that.  :D
I know
LVL 11
Eaddy BarnesITAsked:
Who is Participating?
 
gamebitsCommented:
<tr onMouseOver="this.style.backgroundColor='#f0f1f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
0
 
Eaddy BarnesITAuthor Commented:
Good Stuff...
0
 
gamebitsCommented:
Thanks for the points and the grade, with that I'm now a Guru in HTML :)
0
 
Eaddy BarnesITAuthor Commented:
Aye, thats great dude glad to kick it over the points for u there...

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.