Lorsque vol stationnaire div parent, changer la couleur bg de l'enfant divs

Question

J'ai la configuration suivante:

<div class="parent"> 
    <div class="child"> 
    </div> 
    <div class="child"> 
    </div> 
    <div class="child"> 
    </div> 
</div> 

Je suis en train de changer toute la couleur de fond de tous en même temps, lorsque la souris est planant au-dessus de l'un d'eux. J'ai essayé:

<script type="text/javascript"> 
$(function() { 
    $('.parent').hover(function(){ 
     $(this).css('background-color', 'gray'); 
    }, 
    function(){ 
     $(this).css('background-color', 'red'); 
    }); 
}); 
</script> 

Mais, la couleur est pas "visible à travers" les enfants <div> s.

Existe-t-il un moyen de choisir les descendants de "ceci". J'ai beaucoup de ces ensembles dans une rangée, ainsi je pense que je dois employer "ceci" ainsi je n'ai pas l'appel chaque parent par id. Je pense quelque chose comme ceci:

<script type="text/javascript"> 
$(function() { 
    $('.parent').hover(function(){ 
     $(this "div").css('background-color', 'gray'); 
    }, 
    function(){ 
     $(this "div").css('background-color', 'red'); 
    }); 
}); 
</script> 

Mais, ne peut pas tout à fait le faire fonctionner - tous les exemples sur jquery.com utiliser le sélecteur id ... aucune utilisation « this ».

Merci beaucoup!

Answer 1

avez-vous déjà essayé .children()?

jQuery API

Answer 2

vous pouvez utiliser .find()

$(this).find('div').css('background-color','red'); 

http://api.jquery.com/children/

Answer 3

essayez ceci:

$(function() { 
    $('.parent').hover(function(){ 
     $(this).children("div").css('background-color', 'gray'); 
    }, 
    function(){ 
     $(this).children("div").css('background-color', 'red'); 
    }); 
}); 

Démo:http://jsfiddle.net/zt9M6/

Answer 4

Vous utilisez $() avec des arguments mixtes - il doit s'agir d'une chaîne en tant que sélecteur (div) ou d'un élément DOM (this). Pour sélectionner tous les div s dans le cadre de this, essayez d'appeler comme ceci:

<script type="text/javascript"> 
$(function() { 
    $('.parent').hover(function(){ 
     $("div", this).css('background-color', 'gray'); 
    }, 
    function(){ 
     $("div", this).css('background-color', 'red'); 
    }); 
}); 
</script> 

De http://api.jquery.com/jQuery/#jQuery1

Answer 5

Faites-le avec des classes CSS

.parent .child{ 
    background-color: red; 
} 

.hoverstyle .child{ 
    background-color: gray; 
} 

$(.parent')hover(function() { 
    $(this).addClass("hoverstyle"): 
}, 
function(){ 
    $(this).removeClass("hoverstyle"); 
}); 

Answer 6

Si vous n'êtes pas cibler IE6, pas besoin d'utiliser JavaScript, CSS pur fera l'affaire: