Eaddy Barnes
asked on
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=""> &nbs p;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=""> &nbs p;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=""> &nbs p;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
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="">
<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="">
<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="">
<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
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
Thanks for the points and the grade, with that I'm now a Guru in HTML :)
ASKER
Aye, thats great dude glad to kick it over the points for u there...
ASKER