如何在嵌入式CSS中编写a：hover？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

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

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

#1楼

简短的答案：您不能。

长答案：你不应该。

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

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

回应OP的评论：

有关动态添加CSS规则的良好脚本，请参见带有Javascript的Totally 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>

注意：以上假设存在头部。

#2楼

您无法完全按照自己的描述进行操作，因为a:hover是选择器的一部分，而不是CSS规则的一部分。样式表包含两个组件：

selector {rules}

内联样式只有规则；选择器隐式为当前元素。

选择器是一种表达性语言，它描述了一组条件来匹配类似XML的文档中的元素。

但是，您可以接近，因为从技术上讲， style集可以在大多数地方使用：

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>

#3楼

<style>a:hover { }</style>
<a href="/">Go Home</a>

悬停是伪类，因此不能与样式属性一起应用。它是选择器的一部分。

#4楼

当前的CSS迭代不支持内联伪类声明（尽管据我所知，它可能会在将来的版本中出现）。

就目前而言，最好的选择可能是直接在要设置样式的链接上方定义一个样式块：

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

#5楼

没有办法做到这一点。您的选择是使用JavaScript或CSS块。

也许有一些JavaScript库会将专有的style属性转换为style block。但是，这样的代码将不符合标准。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3143084

标签

hover

css

javascript

css样式表