无法将悬停 属性 添加到自定义 HTML 邮件
Can't add hover property to custom HTML mail
我正在尝试对以下对象执行悬停效果:<a href...
class。
我有 2 个 <a href
,一个是标准的 link,另一个必须是按钮。
.btnMail:hover
#btn:hover
这适用于 GMAIL,但不适用于 Outlook Web。我在 outlook 上获得 :hover 效果的唯一方法是只做一个 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");
有许多 css 元素在电子邮件客户端中表现不佳。
悬停是没有广泛支持的元素之一。
此元素以及其他资源 can be found here 的支持信息。
至于你的例子中的html。请记住,许多垃圾邮件过滤器正在寻找糟糕的 html 语法作为垃圾内容的标志。您应该考虑在邮件中添加 html、head 和 body 标签。
我正在尝试对以下对象执行悬停效果:<a href...
class。
我有 2 个 <a href
,一个是标准的 link,另一个必须是按钮。
.btnMail:hover
#btn:hover
这适用于 GMAIL,但不适用于 Outlook Web。我在 outlook 上获得 :hover 效果的唯一方法是只做一个 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");
有许多 css 元素在电子邮件客户端中表现不佳。 悬停是没有广泛支持的元素之一。 此元素以及其他资源 can be found here 的支持信息。
至于你的例子中的html。请记住,许多垃圾邮件过滤器正在寻找糟糕的 html 语法作为垃圾内容的标志。您应该考虑在邮件中添加 html、head 和 body 标签。