Comment ajouter dynamiquement une nouvelle classe à un élément?

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

Comme pour jQuery, mais traduit en CSS:

$(element).addClass('someclass');

source d'informationauteur sbaaaang

  1. 19

    Bref, la réponse est non 🙂

    Mais vous pouvez simplement utiliser le même CSS pour le décollage de la sorte:

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

    Peut-être que si vous nous expliquer pourquoi vous avez besoin de la classe ajoutée, il peut y avoir une meilleure solution?

  2. 14

    Puisque tout le monde vous a donné jQuery/JS réponses à cela, je vais vous donner une solution complémentaire. La réponse à votre question est toujours pas, mais en utilisant le MOINS d' (CSS Pré-processeur), 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 il va lui donner toutes les propriétés de .first-class. Notez qu'il ne sera pas ajouter à la classe de façon permanente, mais seulement sur le vol stationnaire. Vous pouvez en apprendre plus sur de moins en MOINS ici: Mise en route avec MOINS de

    Voici une SASS façon de le faire ainsi:

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

    CSS n'est pas vraiment la possibilité de modifier un objet de la même manière que le JavaScript, donc en bref - no.

  4. 2

    :hover est un pseudoclass, de sorte que vous pouvez mettre vos déclarations CSS:

    a:hover {
    color: #f00;
}

    Vous pouvez également utiliser une liste de sélecteurs d'appliquer des déclarations CSS à un planait élément ou un élément avec une certaine classe:

    .some-class,
a:hover {
    color: #f00;
}
  5. 0

    pourquoi @Marco Berrocl obtenir une rétroaction négative, et sa réponse est tout à fait raison
    que penser de l'utilisation d'une bibliothèque pour faire de l'animation, donc j'ai besoin d'appeler la classe en stationnaire à l'élément de ne pas copier le code de la bibliothèque et cela me rend lent.

    donc je pense placez pas la réponse et il doit utiliser jquery ou javascript dans de nombreux cas,

  6. 0

    C'est comment vous le faites:

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

    À l'aide de CSS, pas de. Vous avez besoin d'utiliser jQuery pour ajouter.