au survol, changer un seul Div parmi plusieurs de la même classe

Question

J'ai quelques divs similaires avec la même classe. J'ai préparé un javascript pour changer quelques valeurs css au survol, le problème est que maintenant, lorsque je survole une de ces boîtes, toutes celles qui ont le même id et la même classe sont affectées, et je veux juste modifier celle qui est survolée.

HTML

<div class="gameBox" id="gameBox">
            <img src="https://yggdrasilgaming.com/wp-content/uploads/2016/12/yggdrasil-slot-empire-fortune.png" class="gameBoxBg"/>
            <h3 class="gameBoxText">Empire Fortune</h3>
            <div class="downloadCentralizer">
                <img class="downloadLink rightSpace" id="downloadLink" src="https://www.kuboland.com/atm2u/images/googlePlay.png"/>
                <img class="downloadLink leftSpace" id="downloadLink" src="https://www.kuboland.com/atm2u/images/apple.png"/>
            </div>
        </div>

JAVASCRIPT

$("#downloadLink, .gameBoxBg, .gameBoxText").hover(function(){
    $(".gameBoxBg").css("filter", "blur(4px)");
    $(".gameBoxText").css("opacity", "1");
    $(".gameBoxText").css("display", "block");
    }, function(){
    $(".gameBoxBg").css("filter", "blur(0px)");
    $(".gameBoxText").css("opacity", "0");
    $(".gameBoxText").css("display", "none");
});

Quelqu'un peut-il me dire comment résoudre ce problème ? Merci !

Answer 1

Ajouter l'écouteur d'événement sur le .gameBox sélecteur. Ensuite, sur le corps de l'événement, trouvez son enfant puis modifiez-le selon vos besoins.

$(".gameBox").hover(function() {
    $(this).find(".gameBoxBg").css("filter", "blur(4px)");
    $(this).find(".gameBoxText").css("opacity", "1");
    $(this).find(".gameBoxText").css("display", "block");
}, function() {
    $(this).find(".gameBoxBg").css("filter", "blur(0px)");
    $(this).find(".gameBoxText").css("opacity", "0");
    $(this).find(".gameBoxText").css("display", "none");
});

Dans votre code, le $(".gameBoxBg") aura pour résultat que tous les DOMs auront le même sélecteur (dans toutes les boîtes). Vous n'en avez besoin que d'un seul, celui qui se trouve dans le DOM survolé, c'est pourquoi la balise $(this).find(".gameBoxBg") est utilisé ici.

Answer 2

Je suis d'accord avec ce qui précède, vous avez également 2 éléments avec le même id. Les valeurs d'identification doivent être uniques pour l'ensemble du document.