禁用html标记的悬停状态

Question

我想禁用html元素的悬停状态，但不使用其他css来覆盖悬停的css。

这是我的代码行：

<div id="test">
    Hello world
</div>

<style>
    #test {color: red; border: 1px blue solid;}
    #test:hover {color: green; border: 1px blue solid;}
</style>

在这种情况下，当鼠标悬停时，'Hello world'将为绿色，但是当鼠标悬停时我不希望发生任何事情，也没有添加/覆盖新的css来禁用悬停。有没有办法通过javascript / jquery禁用悬停状态？

请帮帮我。感谢

Answer 1

您可以使用此jQuery代码禁用悬停状态：

$(document).ready(function () {
    $('#test').hover(
      function () {
        $('#test').css('color','red');
      }
    );
});