• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 172
  • Last Modified:

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
0
Eaddy Barnes
Asked:
Eaddy Barnes
  • 2
  • 2
1 Solution
 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now