如何在时事通讯中的CTA按钮上创建悬停效果?

Question

我正在Salesforce Pardot中创建一个时事通讯，我希望当您将鼠标悬停在CTA按钮上时它们会改变颜色。

我有两个不同的CTA按钮

对于透明的CTA按钮，我使用的CSS是这样的，这是有效的:

.tr1:hover { background: #F7F36D !important; }
.tr1:hover td { background: transparent; }
.tr2:hover { background: #6BCDDD !important; }
.tr2:hover td { background: transparent; }

等等

但是我也有一个黑色的CTA按钮，我想改变bg的颜色(为#E0A9D5)以及字体的颜色(为#000000)。但不知何故，我似乎不能让它工作:(

这是HTML代码:

<tr class="tr6">
<td align="center" class="em_white" height="36" style="height: 36px; background: rgb(0, 0, 0); padding: 0px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: rgb(0, 0, 0); border-style:solid; border-radius: 0px; border-width: 2px; border-color: black;" valign="middle"><a href="#" pardot-region="editable-link" pardot-region-type="link" style="color:#E0A9D5" target="_blank">Lorem ipsum dolor »</a></td>
</tr>

谁能帮我的CSS部分?谢谢!

Answer 1

为了使用hover属性，您可以简单地在任何选择器上使用:hover。下面是一个简单的例子:

button:hover {
background:yellow;
transform:scale(200%);
}

<button>A button</button>

现在，如果你想让另一个元素在你悬停在一个元素上时改变，你可以使用这样的代码:

div:hover ~ span {
background:red;
}

<div id="element1">a div here</div>
<span>span</span>

Answer 2

在html元素中添加大量的内联样式并不是很好的做法。因此，你应该去掉style="…"的内容。

然后，选择一个合适的选择器，例如class="em_white"然后在这里添加style:

.em_white {... Add stripped out style here...}

之后，您可以在tr标记中定位锚，例如:

.em_white a {background-color:#f00; color:#000}
.em_white a:hover {background-color:#000; color:#fff}

这样做的额外好处是可以减少很多重复，并且您的代码将变得更容易阅读。你也只需要对CSS做一个修改就可以影响所有带有这个类的元素。

Answer 3

我通过将tr6样式化为em_white来修复它。我知道这不是正确的做法，但至少它起作用了。

.tr6 td { background: #000000; }
.tr6:hover td { background: #E0A9D5; }
.em_white1 a { text-decoration: none; color: #E0A9D5; }
.em_white1:hover a { text-decoration: none; color: #000000; }