I am making signatures for my company and I would like to add a hover change color to some of the links. I know there must be a way to do it but all the information must be contained in the one file and I can't get it to work. Everything works fine, except I can't figure out how to make the text change color when I hover.
This is for the Mail app on Mac OSX.
Here's my current code:
<table width='320' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="width: 320px; margin: 0px; padding:0px;">
<tr>
<!-- The formatting of the image -->
<td width="86" style="width: 86px ;margin-left: 20px; padding: 0px;">
<a href='http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg' style="border:none;text-decoration:none;">
<img moz-do-not-send= "true" src= "http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" alt="DatIMG" style=" border:none; width:100px;"></a>
</td>
<!-- Formats the text to be beside, not below, the image-->
<td width="10" style="width: 10px; min-width: 10px; max-width: 10px; margin: 0px ; padding: 0px;"> </td>
<td valign='top' style="margin: 0px ; padding: 0px;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="padding: 0px; margin-top: 10px; font-family: 'Helvetica'; font-size: 14px; color: #58585a; border-collapse: collapse;-webkit-text-size-adjust: none;">
<!-- Start of line 1, Name -->
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<strong><a href="mailto:yomomma@me.com " style="border:none;text-decoration:none;"><span style="color:#147ed9">Fats McGruber</span></a></strong>
<br>
<!-- Start of line 2, Position -->
<span style="color:#58585a;">Bossman • Professional Troll • Wizard</span>
</td>
</tr>
<!-- Start of line 3, company name-->
<tr style="margin:0;padding:0;color:#b0a49b;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="http://www.google.com" style="border:none;text-decoration:none;color:#b0b0b0;"><span style="color:#58585a">Company Name<span style="color:#58585a"></a>
<br>
<!-- Start of line 4, location-->
<a href="https://www.google.com/maps/@62,-145,30641m/data=!3m1!1e3" style="border:none;text-decoration:none;color:#58585a;"><span style="color:#58585a">Some City</span></a>
</td>
</tr>
<!-- Start of line 5, Phone -->
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="tel:+1-555-555-75555" style="margin:0;padding:0;border:none;text-decoration:none;"><span style="color:#58585a">555</span><span style="color:#58585a">.</span><span style="color:#58585a">555</span><span style="color:#e0e0e0">.</span><span style="color:#58585a">5555</span></a>
</td>
</tr>
<!-- Start of line 5, Social Media -->
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="http://facebook.com" style="margin:0;padding:0;border:none;text-decoration:none;">
<span style="color:#58585a">Facebook</span></a>
<span style="color:58585a;">•</span>
<a href="http://twitter.com" style="margin:0;padding:0;border:none;text-decoration:none;">
<span style="color:#58585a">Twitter</span></a>
<span style="color:58585a;">•</span>
<a href="http://instagram.com" style="margin:0;padding:0;border:none;text-decoration:none;">
<span style="color:#58585a">Instagram</span></a>
</td>
</tr>
</table>
</td>
<tr>
</table>