如何写一个：悬停在内联CSS？

2018-06-04 21:53:17

我有一种情况，我必须写内联CSS代码，并且我想要在锚上应用悬停样式。

如何在HTML样式属性中使用a:hover in inline CSS？

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

简答：你不能。

长答案：你不应该。

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

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

回应OP的评论：

动态添加CSS规则的完整脚本，请参见完全使用JavaScript的Pwn CSS。有关该主题的某些理论，另请参阅更改样式表。

另外，别忘了，如果这是一个选项，您可以添加指向外部样式表的链接。例如，

<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>

注意：上面假设有一个头部。

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

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

更准确地说，你可以在过去的某个时候做到这一点。但现在（根据相同标准的最新修订版，即候选推荐标准），您不能......

链接地址: http://www.djcxy.com/p/15779.html

上一篇: How to write a:hover in inline CSS?

下一篇: What is that space?