Content anzeigen, wenn die Maus über den DIV

Ist es möglich den Inhalt anzeigen, wenn die Maus über den DIV. Sehen Bild

Wenn ich die Maus über dem div, der übergang stattfindet, aber ist es möglich Inhalte in den Schwebeflug div, ie. 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;
}
  • Deine Frage ist sehr verwirrend. Was transtition taks statt. Was ist die genaue Frage?
InformationsquelleAutor Farhan Afzal | 2013-07-25
  1. 24

    Davon aus, dass Sie das folgende markup:

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

    CSS:

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

    Dies sollte den trick tun.

    Nicht sicher, wie Sie würde es tun, mit übergängen, aber man müsste die gleichen Selektor zumindest.

    Beispiel

    • Genial, hat den trick. Akzeptiert, in wenigen Minuten.
    • dies ist eine übergangs-version bei Interesse: jsfiddle.net/5Bpur/1
    • Als zusätzliche Anmerkung: Sie können jeden Stil, den Sie möchten in dieser Art und Weise. Die einzige Voraussetzung ist, dass das element, das Sie möchten, zu beeinflussen, ist ein Kind (oder unmittelbaren Geschwister mit der + selector) von dem element, das Sie schweben.
    • Ausgezeichnet!
    InformationsquelleAutor Anpan
  2. 0

    Wenn, pro sagen, Sie haben in diesem Kontext :

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

    Beispiel arbeiten jsFiddled hier

    InformationsquelleAutor Milche Patern
  3. 0

    Ja, es ist möglich.

    Aber wickeln Sie Ihre .flowingdown innerhalb eine div. Inorder zu zeigen, der gesamte Inhalt, 

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

    InformationsquelleAutor Praveen
  4. 0

    Ich nehme an, Sie versuchen zu verbergen die untere Hälfte des hintergrund-Bild, aber ich such eben genau diesem code und es hat 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 der exakt gleiche code, den Sie verwenden, außer ich habe ein Bild von meiner eigenen.

    Wenn das, was Sie wollen, ist zu ändern Sie die hintergrund-Bild auf hover, CSS sollte sein:

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

    Lassen Sie mich wissen, falls ich deine Frage missverstanden.

    InformationsquelleAutor Jacques ジャック
Schreibe einen Kommentar