it-swarm.com.de

Zeige Inhalt, wenn du über DIV schwebst

Ist es möglich, Inhalte anzuzeigen, wenn Sie mit der Maus über den DIV fahren. Siehe Image

Wenn ich über dem Div schwebe, findet der Übergang statt, aber es ist möglich, Inhalte innerhalb des schwebenden Div anzuzeigen. Bilder 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;
}
10
Farhan Afzal

Angenommen, Sie haben die folgende Auszeichnung:

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

Das CSS:

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

Das sollte den Trick tun.

Sie sind sich nicht sicher, wie Sie mit Übergängen vorgehen würden, aber Sie müssten mindestens denselben Selektor verwenden.

Beispiel

23
Anpan

Ich gehe davon aus, dass Sie versuchen, die untere Hälfte des Hintergrundbilds zu verbergen, aber ich habe gerade diesen genauen Code getestet und es hat gut funktioniert:

<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>

Das ist derselbe Code, den Sie verwendet haben, außer ich habe ein eigenes Bild verwendet.

Wenn Sie das Hintergrundbild im Hover ändern möchten, sollte Ihr CSS Folgendes sein:

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

Lassen Sie mich wissen, wenn ich Ihre Frage missverstanden habe.

0
Jacques

Ja, es ist möglich.

Aber wickeln Sie Ihren .flowingdown in ein div. Um den gesamten Inhalt anzuzeigen, 

<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.
}

Überprüfen Sie dies JSFiddle

0
Praveen

Wenn Sie, wie gesagt, diesen Kontext haben:

<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}

Arbeitsbeispiel jsFiddled hier

0
Milche Patern