Comment déclencher CSS "hover state" en utilisant Javascript?

Question

CSS "hover state" 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 à "état survolé" en utilisant Javascript?

C'est possible?

Answer 1

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

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

JS Fiddle .

Ou

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

JS Fiddle .

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

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 définitivement. Les pseudo-classes sont des "pseudo" pour une raison.