所以这并不是用户想要的，但是我发现这个问题是在寻找答案，并且找到了一些相关的东西。我有一堆重复的元素，需要一个新的颜色/悬停在其中的标签。我使用句柄，这是我的解决方案的关键，但其他模板语言也可以工作。

我定义了一些颜色，并将它们传递到每个元素的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

你可以像这样使用内联样式表语句:

<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>

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

下面是最好的代码示例:

<一个 Style =" font - family:宋体;font - family:宋体;" href = " http://aashwin.com/index.php/education/library/ " onmouseover = " this.style.color = # 0 f0” onmouseout = " this.style.color = # 00 f”> 图书馆 < / >

主持人建议:保持关注点的分离。

超文本标记语言 <一个 Style =" font - family:宋体;font - family:宋体;" href = " http://aashwin.com/index.php/education/library/ " 类= " lib-link " > 图书馆 < / >

JS

const libLink = document.getElementsByClassName("lib-link")[0]; //数组0假设只有一个链接， //你将不得不循环或使用事件委托为多个 //但我们不会在这里深入讨论 libLink。Onmouseover = function () { this.style.color = ' # 0 f0 ' ｝ libLink。Onmouseout = function () { this.style.color = ' # 00 f ' ｝

我同意影子的说法。您可以使用onmouseover和onmouseout事件通过JavaScript更改CSS。

不要说人们需要激活JavaScript。这只是一个风格问题，所以如果有一些访问者没有JavaScript也没关系;) 尽管大多数Web 2.0都使用JavaScript。例如Facebook(大量JavaScript)或Myspace。