Question

我正在尝试对<a href...类进行悬停效果。
我有2个<a href，一个是标准链接，另一个必须是按钮。

.btnMail:hover #btn:hover

这适用于GMAIL，但不适用于Outlook Web。使：hover效果在Outlook上起作用的唯一方法是仅执行a:hover，但这会影响所有<a标签。

MimeMessage mimeMessage = mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(mimeMessage, false, "utf-8");

String htmlMsg = ""
        + "<style type=\"text/css\">" +

        "  .btnMail {\r\n" + 
        "  background-color: #007bff;\r\n" +
        "  cursor: pointer;\r\n" + 
        "  border: none;\r\n" +
        "  border-radius: 4px;\r\n" + 
        "  text-decoration: none;\r\n" + 
        "  text-decoration-color: white !important;" + 
        "  color: white !important;\r\n" + 
        "  padding: 15px 32px;\r\n" + 
        "  text-align: center;\r\n" +
        "  display: inline-block;\r\n" + 
        "  font-size: 18px;\r\n" +
        "  }\r\n" +

        "  .btnMail:hover{\r\n" +
        "  background-color: #0069d9 !important;\r\n" +
        "  }\r\n"

        + "</style>"
        + "<div style=\"width:100%;height:100%;\">"
        + "<div style=\"margin-left:auto;margin-right:auto;width:550px;\">"
        + "<h3>" + messages.getMessage("mail.reset", null, locale) + "</h3>"
        + "<div>" + messages.getMessage("mail.hello", null, locale) + " " + restoreUser.getUsername() + ", <br><br>"
        + messages.getMessage("mail.body", null, locale) + "</div><br>"

        + "<a id=\"btn\" class=\"btnMail\" style=\"cursor: pointer;\" href=\"" + tokenLink +"\">"

        + messages.getMessage("mail.button", null, locale) + "</a><br>"
        + "<div>" + messages.getMessage("mail.validtime", null, locale) + "<br><br>"
        + messages.getMessage("mail.thanks", null, locale) + "<br>"
        + messages.getMessage("header.companyname", null, locale) +"</div>"
        + "<br>"
        + "<hr/>"
        + "<div style=\"font-size:12px;\">" + messages.getMessage("mail.link", null, locale) +"<br>"

        + "<a href=\"" + tokenLink +" \">" + tokenLink +"</a></div>"

        + "</div>"
        + "</div>"
        + "";

mimeMessage.setContent(htmlMsg, "text/html");

https://gyazo.com/e8f3a7105b66e6da61ed957e2437cc4d

Answer 1

在电子邮件客户端中，有许多CSS元素的效果不佳。如果没有广泛的支持，悬停就是其中之一。该元素以及其他can be found here的支持信息以及其他资源。

至于示例中的html。请记住，许多垃圾邮件过滤器都在寻找劣质的html语法来表示垃圾内容。您应该考虑在邮件中添加html，head和body标签。

无法将悬停属性添加到自定义HTML邮件

1 个答案: