web-dev-qa-db-fra.com

Comment ajouter une nouvelle classe à un élément de manière dynamique?

Est-il possible d'ajouter une nouvelle classe CSS à un élément sur :hover?

Comme pour jQuery, mais traduit en CSS:

$(element).addClass('someclass');
cssaddclass
20
itsme

Réponse courte non :)

Mais vous pouvez simplement utiliser le même CSS pour le survol comme ceci:

a:hover, .hoverclass {
    background:red;
}

Peut-être que si vous expliquez pourquoi vous avez besoin d'ajouter la classe, il y aura peut-être une meilleure solution?

23
Rene Koch

Puisque tout le monde vous a fourni des réponses jQuery/JS, je vous proposerai une solution supplémentaire. La réponse à votre question est toujours non, mais en utilisant LESS (un pré-processeur CSS), vous pouvez le faire facilement.

.first-class {
  background-color: yellow;
}
.second-class:hover {
  .first-class;
}

Tout simplement, chaque fois que vous passez la souris sur .second-class, toutes les propriétés de .first-class lui seront attribuées. Notez qu’il n’ajoutera pas la classe de manière permanente, mais uniquement en survol. Vous pouvez en apprendre plus sur LESS ici: Premiers pas avec LESS

Voici une façon de faire le SASS:

.first-class {
  background-color: yellow;
}
.second-class {
  &:hover {
    @extend .first-class;
  }
}
18
Nate

CSS n'a vraiment pas la capacité de modifier un objet de la même manière que JavaScript, donc en bref - non.

6
Fluidbyte

:hover est une pseudo-classe, vous pouvez donc y mettre vos déclarations CSS:

a:hover {
    color: #f00;
}

Vous pouvez également utiliser une liste de sélecteurs pour appliquer des déclarations CSS à un élément survolé ou à un élément d'une classe donnée:

.some-class,
a:hover {
    color: #f00;
}
2
nathan

pourquoi @Marco Berrocl reçoit un retour négatif et que sa réponse est tout à fait juste .__ Qu'en est-il de l'utilisation d'une bibliothèque pour créer une animation; .

donc je pense que survol pas la réponse et il devrait utiliser jquery ou javascript dans de nombreux cas

0
user3972776

Voici comment vous le faites:

var e = document.getElementById('myIdName');
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex");
alert('z-index: ' + value);
0
radbyx