我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
当前回答
所以这并不是用户想要的,但是我发现这个问题是在寻找答案,并且找到了一些相关的东西。我有一堆重复的元素,需要一个新的颜色/悬停在其中的标签。我使用句柄,这是我的解决方案的关键,但其他模板语言也可以工作。
我定义了一些颜色,并将它们传递到每个元素的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
其他回答
你可以通过在onMouseOver和onMouseOut参数中使用JavaScript更改样式来获得相同的效果,尽管如果你需要更改多个元素,这是非常低效的:
<a href=“abc.html” onMouseOver=“this.style.color='#0F0'” onMouseOut=“this.style.color='#00F'” >Text</a>
另外,我不太确定这在这里是否适用。你可能需要用document.getElementById('idForLink')来切换它。
简单的回答是:你不能。
长话短说:你不应该。
给它一个类名或id,并使用样式表应用样式。
:hover是一个伪选择器,对于CSS来说,它只在样式表中有意义。没有任何内联样式的对等物(因为它没有定义选择标准)。
回应行政长官的评论:
关于动态添加CSS规则的好脚本,请参阅完全Pwn CSS with Javascript。关于这个主题的一些理论,请参见Change样式表。
另外,不要忘记,如果可以的话,还可以添加到外部样式表的链接。例如,
<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>
注意:以上假设有一个头部部分。
它不是内联CSS,但它是内联的。
<a href=“abc.html” onMouseOver=“this.style.color='#0F0'” onMouseOut=“this.style.color='#00F'”>Text</a>
正如所指出的,你不能为悬停设置任意的内联样式,但你可以在CSS中使用以下方法在适当的标签中更改悬停光标的样式:
style="cursor: pointer;"
根据您的注释,您发送的是一个JavaScript文件。用JavaScript进行翻转。jQuery的$.hover()方法使它变得很容易,就像所有其他JavaScript包装器一样。这在JavaScript中也不是很难。