我怎么能写'a:悬停'在内联CSS?

我有一个情况下，我必须写内联CSS代码，我想应用悬停样式的锚。

我如何使用一个:悬停在内联CSS内的HTML样式属性?

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

当前回答

可以通过添加类来实现id，但不能内联。

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

它只有两行，但是您可以在任何地方重用该类。

其他回答

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

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

只能在外部样式表中使用伪类a:hover。因此，我建议使用外部样式表。代码是:

a:hover {color:#FF00FF;}   /* Mouse-over link */

所以这并不是用户想要的，但是我发现这个问题是在寻找答案，并且找到了一些相关的东西。我有一堆重复的元素，需要一个新的颜色/悬停在其中的标签。我使用句柄，这是我的解决方案的关键，但其他模板语言也可以工作。

我定义了一些颜色，并将它们传递到每个元素的handlebars模板中。在模板的顶部，我定义了一个样式标签，并放入自定义类和悬停颜色。

<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:hover是选择器的一部分，而不是CSS规则。样式表有两个组件:

selector {rules}

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

选择器是一种表达性语言，它描述了一组匹配类xml文档中的元素的标准。

然而，你可以接近，因为从技术上讲，一个风格集几乎可以去任何地方:

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

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

另外，我不太确定这在这里是否适用。你可能需要用document.getElementById('idForLink')来切换它。

推荐文章