带超链接文本的电子邮件反向

Question

我如何使用 CSS 反向方法来反向电子邮件地址以防止带有添加的超链接的垃圾邮件？所以我的页面会说这样的话：请联系站长。

我希望当用户点击网站管理员文本或将鼠标悬停在网站管理员文本上时可以使用该电子邮件。

没有超链接也能正常工作，但我不确定结构如何变化。

Please report errors to the webmaster - <span class="reverse">ku.oc.evil@cba</span>

-

.reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
}

初始状态：https://jsfiddle.net/kfey3wxu/

Answer 1

对不起，我误解了你的问题，我重新看了一遍。我已将此添加到您的 CSS:

div:hover + .reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
}

然后，在您的 HTML 中，我已经为您的网站管理员添加了一个 div。

Please report errors to the
<div>webmaster</div>- <span class="reverse">ku.oc.evil@cba</span>

这里是JSFiddle。希望这就是你想要的。

Answer 2

jsBin demo

您使用的技巧不会阻止机器人程序。

我可以向您展示我为防止大多数（所有，直到现在 :D）的嗅探机器人所做的方法，
这是使用 JS (jQuery):

Contact us at: <span data-yumm="com">some.name\website</span>

反斜杠 \（您也可以使用 "，但我不建议这样做。）不能用作任何有效的电子邮件，因此我们可以将其用作 @ 替代品。

在这里，97% 的机器人都会消失，因为在野外有大量的网站，它们会在其中找到他们感兴趣的 @ 指针，并且不会在您的页面上浪费太多时间:)

现在是我们亲爱的用户和 jQuery:

$('[data-yumm]').text(function(i, v){
  return v.replace("\", "@") +"."+ $(this).data("yumm");
});

仍然有一些机器人有超时等待您的页面加载但是......嘿，还有一些人工机器人需要付费才能完成这项工作，遗憾的是你没有'知道他们是谁来提高出价;)

要将其转换为 mailto: link，请使用以下命令：

$('[data-yummy]').html(function(i, v){
  var email = v.replace("\", "@") +"."+ $(this).data("yummy");
  return "<a href='mailto:'"+ email +">"+ email +"</a>";
});

带超链接文本的电子邮件反向

Email reverse with hyperlink text

html

css

hyperlink