web-dev-qa-db-fra.com

Afficher le contenu lors du survol de DIV

Est-il possible d'afficher du contenu en survolant la DIV. Voir Image

Lorsque je survole la div, la transition a lieu, mais est-il possible d'afficher le contenu à l'intérieur de la div en survol, c'est-à-dire. Images etc

html:

<div class="flowingdown">

</div>

CSS3:

.flowingdown {
    width:1045px;
    background-image:url(images/vertical_cloth.png);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}
htmlcsscss3stylesheetmousehover
10
Farhan Afzal

Supposons que vous ayez le balisage suivant:

<div id="parent">
    Some content
    <div id="hover-content">
        Only show this when hovering parent
    </div>
</div>

Le CSS:

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}

Cela devrait faire l'affaire.

Vous ne savez pas comment procéder avec les transitions, mais vous devrez au moins placer le même sélecteur.

Exemple

23
Anpan

Je suppose que vous essayez de masquer la moitié inférieure de l'image de fond, mais je viens de tester ce code et cela a fonctionné:

<html>
<head>
<style>

.flowingdown {
    width:1045px;
    background-image:url(../Pictures/C_2560x1400.jpg);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}
</style>
</head>
<body>

<div class="flowingdown">

</div>

</body>

C'est le même code que vous avez utilisé, sauf que j'ai utilisé une image de ma propre.

Si ce que vous voulez, c'est changer l'image de fond en survol, votre CSS doit être:

.flowingdown:hover {
    height:100px;
    background-image:url(path.jpg);
}

Faites-moi savoir si j'ai mal compris votre question.

0
Jacques

Oui c'est possible.

Mais envelopper votre .flowingdown dans un div. Pour afficher tout le contenu, 

<div style="width: 200px; height:300px;">
    <div class="flowingdown"></div>
</div>

CSS: 

.flowingdown {
    width:1045px;
    background-image:url(http://i.imgur.com/hHUa9Ty.jpg);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0 55px 55px;
    transition: height 1s;
    -webkit-transition: height 1s;
}
.flowingdown:hover {
    height:100%; //Inorder to show the entire content within the parent.
}

Vérifiez ceci JSFiddle

0
Praveen

Si, par exemple, vous avez ce contexte:

<div class="flowingdown">
    <div class="something-inside">
        something-inside
    </div>
    <div class="something-inside-but-hidden">
        something-inside-but-hidden
    </div>
</div>

CSS

.something-inside-but-hidden {display:none}
.flowingdown:hover .something-inside-but-hidden {display:block}

Exemple de travail jsFiddled here

0
Milche Patern