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

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

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

它不是内联CSS，但它是内联的。

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

虽然内联定义悬停规则似乎是不可能的，但你可以使用CSS变量内联定义styles的值:

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

考虑在选择器之外使用属性或类(例如，[hover-color]:hover)来允许与其他低特异性悬停颜色更改规则共存(例如，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

使用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"

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

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

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