我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
当前回答
只能在外部样式表中使用伪类a:hover。因此,我建议使用外部样式表。代码是:
a:hover {color:#FF00FF;} /* Mouse-over link */
其他回答
正如所指出的,你不能为悬停设置任意的内联样式,但你可以在CSS中使用以下方法在适当的标签中更改悬停光标的样式:
style="cursor: pointer;"
<style>a:hover { }</style>
<a href="/">Go Home</a>
Hover是一个伪类,因此不能与样式属性一起应用。它是选择器的一部分。
使用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"
虽然内联定义悬停规则似乎是不可能的,但你可以使用CSS变量内联定义styles的值:
:{徘徊 颜色:var(——hover-color); } <a style="——hover-color: green"> 图书馆 < / >
考虑在选择器之外使用属性或类(例如,[hover-color]:hover)来允许与其他低特异性悬停颜色更改规则共存(例如,CSS重置或某些元素使用默认样式)。
可以通过添加类来实现id,但不能内联。
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
它只有两行,但是您可以在任何地方重用该类。