如何在内联 CSS 中编写“a:hover”？

Question

我有一个案例，我必须编写内联 CSS 代码，并且我想在锚点上应用悬停样式。

如何在 HTML 样式属性内的内联 CSS 中使用 a:hover ？

例如，您不能可靠地在 HTML 电子邮件中使用 CSS 类。

原文由 Amr Elgarhy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简短的回答：你不能。

长答案：你不应该。

给它一个类名或一个 id 并使用样式表来应用样式。

:hover 是一个伪选择器，对于 CSS 来说，只在样式表中有意义。没有任何内联样式的等效项（因为它没有定义选择标准）。

回应OP的评论：

有关动态添加 CSS 规则的好脚本，请参阅 _Totally Pwn CSS with Javascript_ 。有关该主题的一些理论，另请参阅 _更改样式表_。

另外，请不要忘记，如果可以的话，您可以添加指向外部样式表的链接。例如，

 <script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

注意：以上假设有一个 head 部分。

原文由 Jonathan Fingland 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以通过在 onMouseOver 和 onMouseOut 参数中使用 JavaScript 更改样式来获得相同的效果，尽管如果您需要更改多个元素，它的效率非常低：

 <a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

另外，我不记得 this 是否在这种情况下有效。您可能必须使用 document.getElementById('idForLink') 进行切换。

原文由 Alex S 发布，翻译遵循 CC BY-SA 3.0 许可协议