Sujet : newbie dans le bleu ...

Bonjour,

Je balbutie jQuery depuis peu et rencontre quelques difficultés à convertir mon javascript (qui fonctionne bien, merci) en Jquery :
_________________________________________________________
pb n°1 :
Quelques cartes dans un container dont je souhaite annuler les classes qd je clique à coté des cartes :
en HTML :

<div class="container1"
   <ul class="cards">
      <li><div> ... </div></li>
      <li><div> ... </div></li>
      <li><div> ... </div></li>
   </ul>
</div>

en Javascript :

document.querySelector('.container1').addEventListener('click',function (el) {
        document.querySelectorAll('.cards li').forEach(function(el) {
            el.classList.remove('active');
            el.classList.remove('hover');
        });
    });*/

ce que je traduit, en toute bonne foi, par le jQuery suivant :

$('.container1').click($('.cards li').removeClass('active hover'););

Malheureusement, Firefox 62 dans ubuntu 18.04 m'indique une erreur de syntaxe dans cette ligne.
J'ai beau me creuser la tête, je n'arrive pas à la trouver.
Un point de vue éclairé m'aiderait beaucoup.
______________________________________________________
pb n°2
Sur chacune des mêmes cartes que ci-dessus, j'ai déclaré 3 évènements qui en modifient les classes selon qu'elles sont survolées ou cliquées :
en HTML : (bis repetitae)

<div class="container1"
   <ul class="cards">
      <li><div> ... </div></li>
      <li><div> ... </div></li>
      <li><div> ... </div></li>
   </ul>
</div>

en Javascript : (un peu batard, le blocage du bubbling est en jQuery)

document.querySelectorAll('.cards li').forEach(function(e) {
        e.addEventListener('click',function(event){event.stopPropagation(); e.classList.toggle('active');});
        e.addEventListener('mouseenter',function(event){event.stopPropagation(); e.classList.add('hover');});
        e.addEventListener('mouseleave',function(event){event.stopPropagation(); e.classList.remove('hover');});
    });

Ce javascript fonctionne parfaitement et fait exactement ce que j'attends.
Le blocage du bubbling sert à éviter que le container dessous recevant après coup le click ne supprime les classes ajoutées.
Ce que je traduis en jQuery par :

$('.cards li').on('click',function(event){event.stopPropagation(); $(this).toggleClass('active');});
    $('.cards li').on('mouseenter',function(event){event.stopPropagation(); $(this).addClass('hover');});
    $('.cards li').on('mouseleave',function(event){event.stopPropagation(); $(this).removeClass('hover');});

ET CA FONCTIONNE !
sauf que ...
Sur les cartes en question, il y a quelques textes et logo (en svg) et, uniquement dans le cas jQuery (et donc pas dans le cas javascript d'origine) quand la souris passe au dessus du texte ou du logo, l'objet survolé masque le survol à la carte qui est en dessous.
Sachant que ce survol engendre une légère transformation, qd la souris est au bord du logo, on obtient un très joli tremblement du plus bel effet, mais pas vraiment adéquat à mon application.
Ma question est la suivante :
le blocage du bubbling ne s'appliquant qu'au évènements reçus par la carte elle-même, pourquoi semble-t-il s'appliquer à ses childs, texte ou svg ?

J'ai passé un gros bout de mon après midi sur ces deux machins, je donne ma langue au chat.

Merci par avance de vos lumières, pistes, avis, critiques ...

Roland

(proverbe chinois : Plus près de la lumière, tu es éclairé ...)