Question

当用户将鼠标指针悬停在background-color #838383上时，我需要将此按钮更改为<table width="60%"> <tbody> <tr> <td width="130PX" style="text-align: left;"> <a style="padding: 10px 35px; background-color: #ff0000; color: #fff; text-transform: uppercase; letter-spacing: -.2px; text-decoration: none; font-family: helvetica,arial,sans-serif; border-radius: 20px; font-size: 12px;" href="mailto:123456@abcdef.com?subject=Subject">EMAIL US</a> </td> <td> <b>Bla bla bla</b><br> Bla bla bla.. </td> </tr> </tbody> </table>，我已经尝试了很多东西，但无法让它工作。

.quarter-circle {
    background-color:#c06;
    height:150px;
    width: 150px;
    -moz-border-radius: 150px 0 0 0;
    border-radius: 150px 0 0 0;
}

Answer 1

您应该在<a>标记上使用类，并为悬停事件添加样式。

https://jsfiddle.net/yLkr9as0/

<style>
  .mylink {
    padding: 10px 35px;
    background-color: #ff0000; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: -.2px; 
    text-decoration: none; 
    font-family: helvetica,arial,sans-serif; 
    border-radius: 20px; 
    font-size: 12px;
  }

  .mylink:hover  {
    background-color: blue;
  }
</style>

<table width="60%">
  <tbody>
    <tr>
      <td width="130PX" style="text-align: LEFT;">
        <a class="mylink" href="mailto:123456@abcdef.com?subject=Subject">EMAIL US</a>
      </td>
      <td>
        <b>Bla bla bla</b>
        <br>
        Bla bla bla..
      </td>
    </tr>
  </tbody>
</table>

HTML鼠标悬停按钮颜色更改

1 个答案: