css - HTML 电子邮件 - TD 悬停以更改背景颜色不起作用

Question

我的代码笔： http ://codepen.io/leongaban/pen/iJBrn

请注意，这不适用于常规网页，我正在构建 HTML 电子邮件，但是对于现代浏览器/电子邮件客户端来说，最好有一个简单的翻转颜色（无 javascript）。不知道为什么我的悬停不起作用。

我正在使用从迄今为止我发现的其他 TD hover stackoverflow 问题中找到的代码。

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

你会如何创造这个？

Answer 1

您的内联样式优先于外部样式td.blue-button:hover。

检查这个小提琴

提取类

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

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

Answer 2

检查这个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;
}