如何在内联 CSS 中编写 a:hover?

问题描述

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

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.

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

How can I use a:hover in inline CSS inside the HTML style attribute?

例如您无法在 HTML 电子邮件中可靠地使用 CSS 类.

E.g. you can't reliably use CSS classes in HTML emails.

推荐答案

简短的回答:你不能.

长答案:你不应该.

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

Give it a class name or an id and use stylesheets to apply the style.

:hover 是一个伪选择器，对于 CSS, 仅在样式表中有意义.没有任何内联样式等效项(因为它没有定义选择标准).

:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).

对 OP 评论的回应:

Response to the OP's comments:

参见完全 Pwn CSS withJavascript 用于动态添加 CSS 规则的好脚本.另请参阅更改样式表，了解有关主题.

See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.

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

Also, don't forget, you can add links to external stylesheets if that's an option. For example,

<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 部分.

Caution: the above assumes there is a head section.

这篇关于如何在内联 CSS 中编写 a:hover?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！