Répétition d'un script

Par Grope, il y a 9 ans

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, il y a 9 ans

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, il y a 9 ans

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

betaWeb, il y a 9 ans

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

Grope, il y a 9 ans

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, il y a 9 ans

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, il y a 9 ans

En plus court

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