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

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

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


当前回答

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

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

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

其他回答

在当前的CSS迭代中不支持内联伪类声明(不过,据我所知,在未来的版本中可能会支持)。

现在,你最好的办法可能是直接在你想要样式的链接上方定义一个样式块:

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

你可以像这样使用内联样式表语句:

<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>

这是不可能的。您可以选择使用JavaScript或CSS块。

也许有一些JavaScript库可以将私有样式属性转换为样式块。但是这样代码就不符合标准了。

如果您确实需要内联代码,则可以这样做。我需要它的一些悬停按钮,方法是这样的:

.hover-item { background - color: # FFF; } .hover-item:{徘徊 background - color:继承; } <a style="background-color: red;"> < div class = " hover-item”> 内容 < / div > < /

在本例中,内联代码:"background-color: red;"是悬停时的开关颜色。用你需要的颜色,然后这个解决方案。我意识到,就兼容性而言,这可能不是完美的解决方案,但如果绝对需要,这是可行的。

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

我定义了一些颜色,并将它们传递到每个元素的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