Jquery: Masquer et afficher une div lorsque l'image est survolée

Question

Je me demande si quelqu'un peut m'aider à trouver une solution pour un effet de survol sur une image dans mon blog. L'idée était que lorsque je survole une image, vous voyez une div avec les informations de l'image, le nom du projet, la date,...

Ce que j'ai fait, c'est attribuer deux classes à la div d'information, la classe show et la classe hide, et au début elle apparaît avec une classe hide.

Puis avec jQuery/JavaScript, lorsque le img:hover retire la classe hide et ajoute la classe show.

le problème est que lorsque je survole une image, les informations de toutes les images apparaissent.

Je me demande si quelqu'un peut m'aider à faire apparaître uniquement les informations de l'image sur laquelle la souris est en survol.

Mon HTML:

      Titre
      Lorem Ipsun
      En savoir plus

      Titre
      Lorem Ipsun
      En savoir plus

Mon CSS:

body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}

/* EFFET DE SURVOL */

.hide {
display: none;
}

.show {
display: block;
}

Mon JavaScript:

$('img').hover(function() {
    $('.information').addClass("mostrar");
    $('.information').removeClass("hide");      
});

Et au fait, si quelqu'un peut me dire comment cacher à nouveau les informations lorsque l'image n'est plus survolée, je vous en serais reconnaissant.

Answer 1

Que diriez-vous de quelque chose de plus simple :

$("div.content > img").hover(function() {
    $(this).next(".information").show(); //activation du survol
}, function() {
    $(this).next(".information").hide(); //désactivation du survol
});

Ainsi, en utilisant les fonctions jquery .show et .hide, vous n'avez pas besoin d'utiliser le CSS que vous avez créé pour l'effet de survol, car ces fonctions de jquery s'occupent déjà des attributs.

Answer 2

Si vous n'avez pas besoin de prendre en charge IE7 et versions inférieures, vous pouvez le faire uniquement avec du CSS en utilisant le sélecteur de frères adjacents, aucun JavaScript n'est requis :

img + div.information {
    display: none;
}
img:hover + div.information {
    display: block;
}

Cela signifie : "Masquer div.information lorsqu'il est immédiatement après un img" mais "Afficher div.information lorsqu'il est immédiatement après un img en surbrillance". Cette dernière règle étant à la fois plus tard dans le CSS et (je crois) plus spécifique, elle l'emporte lorsque l'image est survolée et non lorsqu'elle ne l'est pas.

Exemple en direct - Fonctionne dans les navigateurs modernes, y compris IE8 et supérieurs.

Answer 3

le problème est que, lorsque je survole une image, les informations de toutes les images apparaissent.

Je pense que c'est parce que vous faites référence à la classe d'informations génériques, pas à l'identifiant d'une seule div. Au lieu de cela, utilisez la référence de frère adjacent pour obtenir uniquement les informations de l'image sur laquelle vous survolez. Vous pourriez utiliser le sélecteur :nth-child().

$("#content:nth-child(1)")

De plus, vous ne devriez pas avoir plusieurs divs avec le même id.

Answer 4

$(this).parent().find('.information').addClass("mostrar")
    .removeClass("hide");   

Cela va récupérer le parent de l'image individuelle survolée, rechercher à l'intérieur du parent et trouver l'élément .information spécifique à cette image.

Answer 5

Essayez ceci :

$('img').hover(function(){
    $(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');

}, function(){
    $(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});