Comment déclencher un "état de survol" CSS à l'aide de Javascript ?

Question

L'"état survolé" de CSS se déclenchera lorsque l'utilisateur survolera un élément :

 <style>
.element{

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

Comment pouvons-nous définir l'élément sur "l'état survolé" à l'aide de Javascript ?

C'est possible?

Answer 1

Si vous pouvez accepter d'utiliser :focus au lieu de survoler, vous pouvez utiliser :

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

Démo de JS Fiddle .

Ou

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

Démo de JS Fiddle .

Cette approche nécessite évidemment d'adapter votre CSS pour inclure le style a:focus

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

Answer 2

Vous feriez probablement mieux de dupliquer les styles :hover dans une autre classe, puis d'ajouter simplement ce nom de classe à l'élément lorsque vous souhaitez qu'ils changent de façon permanente. Les pseudo-classes sont des "pseudo" pour une raison.