HTML email - TD hover to change back background-co

Question

My codepen: http://codepen.io/leongaban/pen/iJBrn

Note this isn't for a regular webpage, I'm building an HTML email, however for modern browsers / email clients it would be nice to have a simple rollover color (no javascript). Not sure why my hover isn't work.

I'm using code found from the other TD hover stackoverflow questions I've found so far.

td.blue-button:hover {
        background-color: #267aa6;
}

How would you create this?

Answer 1

You inline style is taking precedence over the external td.blue-button:hover.

Check this fiddle

Extract the class

td.blue-button {
    background-color: #006497;
}

td.blue-button:hover {
    background-color: #267aa6;
}

Answer 2

Check this CodePen.

HTML:

<table cellpadding="0" cellspacing="0" border="0" width="250" bgcolor="#ffffff" style="margin:0 auto;">
<tr>
    <td class="blue-button" width="250" align="center" style=""><a href="#">reply to request</a>
  </td>
 </tr>
</table>

CSS:

td.blue-button:hover {
            background-color: #267aa6;
}

td.blue-button {
  font-family: Arial, sans-serif; 
  font-weight:bold;
  color:#ffffff;
  text-shadow: 1px 1px 3px #014568;
  background-color: #006497; 
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px; 
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; 
  border-radius: 4px;
}

td.blue-button a {
  color:#ffffff; 
  text-shadow: 1px 1px 3px #014568;
  text-decoration:none;
}