我有一种情况，我必须编写内联CSS代码，并且我想在锚点上应用悬停样式。
如何a:hover在HTML样式属性内的内联CSS中使用？
例如，您不能在HTML电子邮件中可靠地使用CSS类。
如何在嵌入式CSS中编写a：hover？
第1630篇《如何在嵌入式CSS中编写a：hover？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共15个回答
您只能a:hover在外部样式表中使用伪类。因此，我建议使用外部样式表。代码是：
a:hover {color:#FF00FF;} /* Mouse-over link */
我必须避免使用javascript，但可以使用服务器端代码。
所以我生成了一个ID，创建了一个样式块，并生成了具有该ID的链接。是的，它是有效的HTML。
a {
text-decoration: none;
color: blue;
}
a:hover {
color: blue;
font-weight: bold;
}<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
a[data-hover="rnd-id-123"] { color: green; }
a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>
<br>
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
a[data-hover="rnd-id-456"] { color: purple; }
a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>所以这并不是用户想要的，但是我发现这个问题在寻找答案，并提出了一些相关的问题。我有一堆重复的元素，它们中的选项卡需要新的颜色/悬停。我使用车把，这是解决方案的关键，但是其他模板语言也可以使用。
我定义了一些颜色，并将它们传递到每个元素的车把模板中。在模板的顶部，我定义了一个样式标签，并添加了自定义类和悬停颜色。
<style type="text/css">
.{{chart.type}}-tab-hover:hover {
background-color: {{chart.chartPrimaryHighlight}} !important;
}
</style>
然后，我在模板中使用了样式：
<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
Payouts
</span>
您可能不需要 !important
我只是想出了一个不同的解决方案。
我的问题：我<a>在一些幻灯片/主要内容查看器周围有一个<a>标签，在页脚中也有一个标签。我希望它们在IE中位于同一位置，因此onHover即使它们不是链接，整个段落也都带有下划线：幻灯片整体是一个链接。IE不知道区别。我的页脚中也有一些实际的链接，这些链接确实需要下划线和颜色更改onHover。我以为我必须将样式与页脚标记内联以进行颜色更改，但是从上面的建议来看，这是不可能的。
解决方案：我为页脚链接提供了两个不同的类，而我的问题已解决。我能够onHover在一类中进行颜色更改，使幻灯片onHover没有颜色更改/下划线，并且仍然能够在页脚和幻灯片中同时具有外部HREFS！
没有办法做到这一点。您的选择是使用JavaScript或CSS块。
也许有一些JavaScript库会将专有的style属性转换为style block。但是，这样的代码将不符合标准。
根据您的评论，无论如何，您正在发送一个JavaScript文件。在JavaScript中进行过渡。jQuery的$.hover()方法非常简单，其他所有JavaScript包装器也是如此。在直接的JavaScript中也不是很难。
<style>a:hover { }</style>
<a href="/">Go Home</a>
悬停是伪类，因此不能与样式属性一起应用。它是选择器的一部分。
当前的CSS迭代不支持内联伪类声明（尽管据我所知，它可能会在将来的版本中出现）。
就目前而言，最好的选择可能是直接在要设置样式的链接上方定义一个样式块：
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
您不能完全执行所描述的内容，因为它a:hover是选择器的一部分，而不是CSS规则的一部分。样式表包含两个组件：
selector {rules}
内联样式只有规则；选择器隐式为当前元素。
选择器是一种表达性语言，它描述一组条件以匹配XML相似的文档中的元素。
但是，您可以接近，因为从style技术上讲，集合几乎可以在任何地方移动：
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
我特别迟促成这一点，但是我很遗憾地看到没有人提出这一点，如果你真的需要内嵌代码，这是可以做到的。我需要一些悬停按钮，方法是这样的：
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</aIn this case, the inline code: "background-color: red;" is the switch colour on hover, put the colour you need into there and then this solution works. I realise this may not be the perfect solution in terms of compatibility however this works if it is absolutely needed.
简短答案：您不能。
长答案：你不应该。
给它一个类名或一个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>
注意：以上假设存在头部。
相似问题
问题类别
您可以通过添加一个类来做id，但不要内联。
2行，但您可以在任何地方重用该类。