Utilisation de jQuery pour modifier le pseudo survol (hover)

Question

Donc, je ne fais pas beaucoup de front-end, et je suis sûr que c'est très simple. Je n'ai juste pas été capable de voir une réponse jusqu'à présent.

J'ai une fonction jQuery qui déclenche certains changements CSS.

$(".nav-link").css({ set of changes });

Mais que faire si je veux ajouter des propriétés au pseudo survol ?

J'ai essayé

$(".nav-link:hover").css({ ... });

mais cela ne semble pas fonctionner.

Gracias

Answer 1

Vous devez appliquer le hover() méthode en tant que fonction par exemple :

$('.nav-link').hover(function(){
  $(this).css({'background':'lightblue', 'border':'none'});
}, function(){
  $(this).css({'background':'initial', 'border':'1px solid'});
});

.nav-link {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-link"></div>

Answer 2

La fonction .hover fonctionne, mais il est parfois beaucoup plus facile d'écrire directement le CSS.

Voici un moyen que j'ai utilisé pour le faire fonctionner dans les cas limites. ( Ce n'est peut-être pas une bonne pratique. )

Vous pouvez littéralement ajouter n'importe quel css en utilisant cette méthode.

$('body').append('<div class="new-styles"></div>');

$('.new-styles').html(`
<style>
    a:hover {
        /* ... */
    }
    a:after {
        /* ... */
    }
</style>
`);

Lorsque vous voulez enlever le style, il suffit de faire

$('.new-styles').remove();

(J'utilise les littéraux de modèle ES6 dans cet exemple pour que cela soit plus propre. Vous pouvez vérifier https://caniuse.com/#search=interpolation avant de l'utiliser en production).