Question

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

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

我正在使用从目前为止我发现的其他TD悬停stackoverflow问题中找到的代码。

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

你会如何创造这个？

Answer 1

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

检查this fiddle

提取课程

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;
}

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

2 个答案: