我有一种情况,我必须编写内联CSS代码,并且我想在锚点上应用悬停样式。
如何a:hover在HTML样式属性内的内联CSS中使用?
a:hover
例如,您不能在HTML电子邮件中可靠地使用CSS类。
简短答案:您不能。
长答案:你不应该。
给它一个类名或一个ID,然后使用样式表来应用样式。
:hover是一个伪选择器,对于CSS而言,仅在样式表中具有含义。没有任何等效的内联样式(因为它没有定义选择标准)。
:hover
对OP的评论的回复:
有关动态添加CSS规则的良好脚本,请参见 _带有Javascript的Totally PwnCSS 。另请参阅 _更改样式表以获取有关该主题的一些理论。
另外,请不要忘记,如果可以的话,您可以向外部样式表添加链接。例如,
<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>
注意:以上假设存在头部。
您可以使用onMouseOver和onMouseOut参数中的JavaScript来更改样式,从而获得相同的效果,尽管如果需要更改多个元素,效率会非常低:
onMouseOver
onMouseOut
<a href="abc.html" onMouseOver="this.style.color='#0F0'" onMouseOut="this.style.color='#00F'" >Text</a>
另外,我不确定是否this可以在这种情况下使用。您可能需要使用进行切换document.getElementById('idForLink')。
this
document.getElementById('idForLink')