我有一个情况下,我必须写内联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变量内联定义styles的值:

:{徘徊 颜色:var(——hover-color); } <a style="——hover-color: green"> 图书馆 < / >

考虑在选择器之外使用属性或类(例如,[hover-color]:hover)来允许与其他低特异性悬停颜色更改规则共存(例如,CSS重置或某些元素使用默认样式)。

你可以在过去的某个时候这样做。但现在(根据同一标准的最新修订,即候选人推荐)你不能这样做了 .

使用JavaScript:

a)增加内联样式

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

B)或者更难一点的方法——添加“鼠标悬停”

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

注意:JavaScript中的多词样式(即font-size)是一起编写的:

element.style.fontSize="12px"

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

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

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

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

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

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