Afficher la div enfant lors du survol de la div parent - nécessite-t-il du javascript ?

Question

Je dois afficher une div lorsque vous survolez son parent (par défaut, la div enfant est cachée). Est-ce la seule façon de le faire avec javascript ? Merci

Answer 1

Pas de JS requis.

.hidden {
  display: none;
}

.parent:hover .hidden {
  display: block;
}

  Bonjour, je suis un enfant...
  ..et moi aussi, mais je suis caché.

Answer 2

@jdln; oui

css:

.outer {
    background:red;
    height:100px;
}
.box1 {
    background:blue;
    height:100px;
    width:80px;
    display:none;
}
.outer:hover .box1{
    display:block;
    cursor:pointer;
}

vérifiez le fiddle: http://jsfiddle.net/sandeep/XLTV3/1/

Answer 3

Avec jQuery, absolument :

$("#some_parent").hover(function ()
{
    $(this).children("#some_child_div").show();
});

Answer 4

En plus de la réponse acceptée, on peut utiliser opacity afin que la disposition ne saute pas lors du survol (cela permet également d'animer l'apparition) :

css :

.show-on-hover-parent:hover .show-on-hover-item {
    opacity: 1;
   //transition: opacity .5s; //<- animation d'opacité facultative
}

.show-on-hover-parent .show-on-hover-item {
    opacity: 0;
   //transition: opacity .5s; //<- animation d'opacité facultative
}

html :

    Toujours visible 1
    visible au survol
    Toujours visible 2

Answer 5

Initialement, j'utilisais la solution CSS ci-dessus, mais j'ai dû utiliser jQuery car mon div enfant contenait une image qui provoquait un scintillement au survol. Ici, nous affichons l'enfant en survolant le parent (si la taille de l'écran est de bureau) au survol et le cachons à la sortie, mais seulement si nous ne survolons pas le conteneur de la page principale, pour minimiser le scintillement :

$(document).ready(function () {
    $(".parent-qtip").mouseenter(function () {
        if ($(window).width()>=1200)
            $(this).children(".child-qtip").show();
    });
    $(".parent-qtip").mouseleave(function () {
        if ($('.page-content').find('.container:hover').length)
            $('.child-qtip').hide();
    });
});