Comment résoudre le problème du survol invalide dans js

Cela est en fait dû à la priorité du CSS.

Tout d'abord, voyons comment le survol peut définir la couleur d'arrière-plan normalement sans utiliser js pour ajouter des attributs CSS.

<div id="add"></div>

#add{
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}#add:hover{
  background-color: #000;
}

L'image de gauche est par défaut, et l'image de droite à droite est l'endroit où la souris est placée, le survol peut désormais toujours être affiché normalement.

(Les images ci-dessous sont toutes par défaut à gauche et survolées à droite. Cela devrait être dû au fait que l'outil de capture d'écran ne peut pas capturer la souris)

Mais si le style CSS est inséré via js, le style de survol sera utilisé lorsque la souris est placée. Il ne prendra pas effet.

var add = document.getElementById("add");
add.style.backgroundColor = "red";

L'attribut #000 défini en survol est désormais invalide.

Mais ce n'est pas la fonction que la pseudo-classe hover a perdue. Si le paramètre n'est pas un style ajouté par js, vous pouvez voir que le survol n'est pas invalide. Par exemple, essayez d'ajouter une couleur de police.

#add:hover{
  background-color: #000;
  color: yellow;
}

Vous pouvez voir que la couleur de la police va toujours changer.

La raison est que le style CSS qui doit être ajouté à js est ajouté directement au style de la balise html, et la priorité du style est supérieure à la pseudo-classe CSS.

De haut en bas, style, survol, sélecteur d'identifiant.

Vous pouvez voir dans l'outil de débogage du navigateur que js est ajouté directement au style.

Alors que faut-il faire ?

Il parle de la priorité du sélecteur. Mais il n'a pas parlé de la priorité des pseudo-classes et des styles CSS.

Mais la pseudo-classe :hover est également invalide. Style de description>pseudo-classe CSS>id>classe.

Ajoutez simplement !important après l'attribut :hover. Cela devrait être une priorité importante par-dessus tout ! !

!important>style>pseudo-classe css>id>class.

#add:hover{
  background-color: #000 !important;
}

Maintenant, j'ai enfin atteint le résultat souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!