Répétition d'un script

Grope
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Voici mon code HTML

<div class="bloc">
    <p class="title">Blabla</p>
    <p class="text">Blabla</p>
</div>
<div class="bloc">
    <p class="title">Blabla</p>
    <p class="text">Blabla</p>
</div>

Et mon code Javascript

    $(document).ready(function(){
        $(".bloc").hover(function(){
            $(".logo").css("color", "#fff");
            $(".title").css("color", "#fff");
        }, function(){
            $(".logo").css("color", "#0093B7");
            $(".title").css("color", "#0093B7");
        });
    });

Ce code permet donc que dès que le curseur passe sur l'un des blocs, les éléments "logo" et "title" changent de couleurs.
Cependant lorsque je passe ma souris sur le premier bloc, les deux bloc changent alors de couleurs.
N'existerait-il donc pas un moyen pour que le code comprenne qu'il ne doit prendre en compte seulement son propre bloc ?

J'éspère que j'ai été clair dans mes propos xP
Merci d'avance ! ;D

6 réponses

betaWeb
Réponse acceptée

Salut,

Là tu cible tous les éléments ayant les classes .logo et .title. Il faut cibler seulement les enfants de l'élément .bloc survolé :

$(document).ready(function(){
    $(".bloc").hover(function(){
        var self = $(this);      
        $(".logo", self).css("color", "#fff");
        $(".title", self).css("color", "#fff");
    }, function(){
        var self = $(this);      
        $(".logo", self).css("color", "#0093B7");
        $(".title", self).css("color", "#0093B7");
    });
});
Huggy

En utilisant le selecteur '.bloc.logo" et '.bloc.title'

betaWeb

@Huggy Non, ça revient au même, il faut cibler uniquement les enfants de l'élément survolé.

Grope
Auteur

Je me doutais bien qu'il y avait une histoire de $(this) là dedans mais je ne savais pas où le mettre :P
Merci beaucoup pour ta réponse ca marche niquel ;D

Huggy

Ok alors je propose

$(document).ready(function(){
        $(".bloc").hover(function(){
            $(this).children().filter('.title').css("color", "#fff");
        },
         function(){
            $(this).children().filter('.title').css("color", "#0093B7");
        });
    });

le $(this) sélectionne le bloc sous la souris et on filtre ses enfants
on pourrait aussi faire $(this).css("color", "#fff"); si on prend tous les enfants

Huggy

En plus court

$(document).ready(function(){
        $(".bloc").hover(function(){
            $(this).children('.text, .title').css("color", "#600");
        },
         function(){
            $(this).children('.text, .title').css("color", "#0093B7");
        });
    });