-1

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;">&nbsp;</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 &bull; Professional Troll &bull; 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;">&bull;</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;">&bull;</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>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • possible duplicate of [How to write a:hover in inline CSS?](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) – Soufiane Hassou Sep 05 '14 at 04:07

1 Answers1

0

You can't do that by just using HTML the most simple way of change the text when hovering is giving each signature you want a to change colour a class and then using CSS Hover function to change the colour.

Example below

HTML CODE:

<div class="signature1">
<a href="link.html"> YOUR LINK </a>
</div>

CSS CODE:

.signature1{
color: #fff
}

.signature1 hover{
color: FF0000
}

That is the way i'd do it as its easier and if you wanted to change it the future it just as easy.

Kris Edwards
  • 35
  • 2
  • 10