您可以编写各种类型的代码。

首先我可以这样写

HTML

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one {
    text-decoration: none;
}

你可以试试另一种方法:

HTML

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one {
    text-decoration: none;
}

.one:hover {
    color: blue;
}

.one:active {
    color: red;
}

你也可以在jQuery中尝试hover:

JavaScript

$(document).ready(function() {
  $("p").hover(function() {
    $(this).css("background-color", "yellow");
    }, function() {
      $(this).css("background-color", "pink");
  });
});

HTML

<p>Hover the mouse pointer over this paragraph.</p>

在这段代码中，有三个jQuery函数。首先你准备一个函数，这是jQuery的基本函数。其次，在这个函数中有一个悬停函数。当你将一个指针悬停到文本上时，颜色会改变，然后当你释放指向文本的指针时，它会是不同的颜色，这是第三个函数。

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

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

它不是内联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重置或某些元素使用默认样式)。

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