如何使用Javascript触发CSS"悬停状态"？

Question

当用户将鼠标悬停在元素上时,将触发CSS的"悬停状态":

<style>
.element{

}
.element:hover{
    background-color:red;
}
</style>

如何使用Javascript将元素设置为"悬停状态"？

可能吗？

Answer 1

如果您可以接受使用:focus而不是悬停,则可以使用:

var links = document.getElementsByTagName('a');
links[0].focus();

JS小提琴演示.

要么

var linkToFocus = document.getElementById('link');
linkToFocus.focus();

JS小提琴演示.

显然,这种方法需要调整CSS以包含a:focus样式:

a:link, a:visited {
    background-color: #fff;
}
a:hover, a:focus, a:active {
    background-color: #f00;
}

Answer 2

您可能最好将:悬停样式复制到另一个类中,然后只需要将该类名称添加到元素中,以便永久更改它们.由于某种原因,伪类是"伪"的.