jQuery : Ajouter une classe à l'enfant d'un élément

Question

HTML:

<div class="cell-container">
  <img src="image.png" class="thumbnail" />
</div>

CSS:

.hover {
  background-color: silver;
}
.hover-image {
  border: 1px solid #000;
}

jQuery :

$(".cell-container").mouseover(function() {
    $(this).addClass("hover");
});

$(".cell-container").mouseout(function() {
    $(this).removeClass("hover");
});

En gros, je veux que le div cell-container pour que l'arrière-plan soit mis en évidence au passage de la souris. Mais ajoutez également une bordure à la <img> qu'il contient. Comment puis-je y parvenir ?

Answer 1

Pourquoi ne pas le faire simplement en CSS ?

div.cell-container:hover {
  background-color: silver;
}

div.cell-container:hover img.thumbnail {
  border: 1px solid #000;
}

Answer 2

Au fait $.hover permet à la fois le passage de la souris et la sortie de la souris.

$(".cell-container").hover(function() {
    $(this).addClass("hover");
    $(this).children('img').addClass('hover-image');
}, function() {
    $(this).removeClass("hover");
    $(this).children('img').removeClass('hover-image');
});

Answer 3

DEMO

$(".cell-container").mouseover(function() {
    $(this).addClass("hover").find('img').addClass('hover-image');
});

$(".cell-container").mouseout(function() {
    $(this).removeClass("hover").find('img').removeClass('hover-image');
});

Et vous devez changer votre CSS :

.hover-image {
  border: 1px solid #000;
}

Answer 4

$(".cell-container").hover(function(){ // using hover for shorter syntax
    $(this)
        .addClass("hover") // add hover class on mouseover
        .find("img") // select the child image
            .addClass("hover-image"); // add hover class
}, function(){ // mouseout function
    $(this)
        .removeClass("hover") // remove hover class
        .find("img") // select the child image again
            .removeClass("hover-image"); // remove hover class
});

En savoir plus hover() aquí .

Answer 5

Pourquoi pas :

.cell-container:hover
{
  background-color: silver;
}

.cell-container:hover img
{
  border: 1px solid #000;
} 

juste du css.

Si vous ne faites qu'ajouter des classes de style, vous devez toujours vous assurer que ce que vous essayez d'obtenir n'est pas possible en css (c'est généralement le cas).