Wie Sie ein div-Element und seinen Inhalt auf hover?
Ich versuche, erstellen Sie ein div, das sich auf schweben, aber kann nicht herausfinden, wie man die Inhalte erweitern mit den div. Ich habe versucht, ein paar overflow-Optionen, aber Sie funktionieren nicht.
CSS:
.grow {
padding: 5px 5px 5px 5px;
border-radius:10px;
height: 50px;
width: 22%;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition:height 0.5s;
-webkit-transition:height 0.5s;
text-align: center;
}
.grow:hover {
height: 115px; /* This is the height on hover */
}
HTML:
<div class="grow" style="background-color: #2a75a9;">
<h2>Title</h2> <br>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
</div>
Hier ist die JSFiddle
InformationsquelleAutor Nicole | 2014-12-12
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hinzufügen
overflow: hidden
zu den Eltern (.grow
) - container ausblenden der Beschreibung. Dadurch wird erkennbar, die Beschreibung auf schweben.Zusätzlich, anstatt die
<br />
tag, wickeln Sie den text in einem<p>
tag.CSS:
HTML:
nur update;
Überprüfen Sie mit dem folgenden link, wenn Sie mit Ihnen arbeitet.
https://jsfiddle.net/gknLstpt/9/
transition: width 0.5s; -webkit-transition: width 0.5s;
ich auch geändert .wachsen:hover Höhe auf "auto" es zeigt alle Inhalte, die es enthält. Ändern Sie die height-Attribut aus der Höhe, um den übergang weniger glatt, so dass ich die Geschwindigkeit mit der er bis zu 0,2 s zu kompensieren, die in diesem demo. Dieser "fix" funktioniert nicht bei allen gut; es ist trotzdem zu pflegen, weiche übergänge beim Umgang mit dem Objekt die Höhe dynamisch?Mit nur CSS, erste Schlüssel ist "overflow:hidden", aber wenn Sie fix-Höhe, alle Ihre Elemente erweitert dieselbe Weise, egal mit text. Wenn Sie nicht "height:auto", Sie dehnt sich rechts Höhen, aber keine animation unterstützt. Es ist ein Weg, Sie tun sich beide etwas javascript zu nutzen element.scrollHeight, und gibt Ihnen die korrekte Höhe, auf der sich alle benötigten Elemente.
JS:
CSS:
HTML: