Question

我想在鼠标悬停时更改按钮颜色。我有以下代码的按钮。

＆＃13;

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td align="CENTER" class="content-block" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: middle; margin: 0; padding: 0 0 0px;" width="33%" valign="middle">

        <a class="btn-primary" href="[http://www.google.com][1]" style="font-family: 'Arial,sans-serif', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 11px; color: #FFF; text-decoration: none; line-height: 2; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #348eda; margin: 0; padding: 0; border-color: #348eda; border-style: solid; border-width: 3px 7px;">Google</a>

      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

你可以用css

来做

a:hover { 
    background-color: yellow;
}

Answer 2

实际上a:hover { ... CSS properties ... }可行，但在您的情况下，anchor-tag会被赋予内联css，因此您的CSS中的:hover选择器会被您的内联CSS覆盖（您在<a style='... CSS properties ...'></a> ）

中的内容

所以建议你尝试如下：

在外部CSS文件中提供CSS属性（如果有）或作为内部CSS（在<head>...</head>内）。

a{
  font-family: 'Arial,sans-serif', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 11px; color: #FFF; text-decoration: none; line-height: 2; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #348eda; margin: 0; padding: 0; border-color: #348eda; border-style: solid; border-width: 3px 7px;
  }

a:hover
{
  background-color:#24659C;
  border-color:#24659C;
  }

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td align="CENTER" class="content-block" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: middle; margin: 0; padding: 0 0 0px;" width="33%" valign="middle">

        <a class="btn-primary" href="[http://www.google.com][1]" style="">Google</a>

      </td>
    </tr>
  </tbody>
</table>

旁注：如果您可以向class-name提供具体的id或<a>，然后应用您的CSS，也会更好。

如何在html中

2 个答案: