CSS erweitert Text auf Hover

Ich brauche eine CSS, die standardmäßig nur zwei Zeilen von Codes anzeigen, aber wenn der Benutzer darauf schweben, Der Rest des Textes angezeigt werden soll.CSS erweitert Text auf Hover

Zum Beispiel:

Es ist, was es sein sollte wie standardmäßig aussieht:

Und das ist, was es sein sollte, wie wenn der Benutzer schweben darauf:

Wie Sie sehen können, wird der restliche Text angezeigt, wenn der Benutzer den Mauszeiger darüber bewegt, aber standardmäßig nur zwei Linien des Produktnamens werden gezeigt

Was ist der css-Trick dafür?

Dank

Quelle

2016-05-06 j edgar

Was haben Sie selbst versucht? Wo ist der Startpunkt im Code? Fügen Sie ein minimales, vollständiges und überprüfbares Beispiel hinzu, siehe auch http://stackoverflow.com/help/mcve – Roy

Mögliches Duplikat von [Kombinieren: nach mit: hover] (http://stackoverflow.com/questions/13233991/combine -nach-mit-schweben) – Jurik

gerade eingestellt height auf Element festgelegt und setzen Sie ihn auf schweben auf Standard.

.special { 
 
    width: 100px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
} 
 
.special:hover { height: auto; }

<div class="special"> 
 
    This is very long text This is very long text This is very long text This is very long text This is very long text This is very long text 
 
</div>

Wenn Sie Animation auch verwenden max-height wollen. Hier ist ein jsFiddle mit Beispiel.

Quelle

2016-05-06 07:32:54 Buksy

Upvote. Nur einen zusätzlichen Vorschlag, legen Sie die Zeilenhöhe mit ems und dann die Höhe auf das Doppelte der Zeilenhöhe, um sicherzustellen, dass zwei komplette Zeilen zu Beginn angezeigt werden. h. 'line-height: 1.1em; höhe: 2.2em;' –

https://jsfiddle.net/chan_omega/vmaf5en1/1/ –

@ArleighHix netter one :) –

Nun, wenn Sie für eine einfache Antwort suchen, dann mit diesem fiddle

gehen Was i tat, erstellt p-Tag und verwendet span innen. Auf dem Hover von p die Spanne zeigen und Sie sind :)

HTML

<p> 
    This is the test which will be shown up normally 
    <span>But if you will hover on the test then this text will also be there./span> 
    </p>

CSS

span 
    { 
    display:none; 
    } 
p:hover span 
    { 
    display:block; 
    }

Quelle

2016-05-06 07:34:52

Der beste Weg wäre die Verwendung done "overflow: hidden" , dann ändern Sie die Größe des Containers mit der Auswahl ": Hover". Hoffe, dass dies half

Quelle

2016-05-06 07:35:54 pelomeduda

Sie können es tun (durch Höhen Fixierung und erweitern sie auf schweben mit einem gewissen Übergang) wie folgt aus:

.extend { 
 
    background-color: cadetblue; 
 
    padding: 5px 5px 5px 5px; 
 
    border-radius: 4px; 
 
    height: 50px; 
 
    width: 25%; 
 
    transition: height 0.5s; 
 
    -webkit-transition: height 0.5s; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
.extend:hover { 
 
    height: 145px; 
 
}

<div class="extend"> 
 
    <p>Aliquet suspendisse imperdiet in, class sollicitudin condimentum ante odio! Litora semper arcu, auctor maecenas sodales.</p> 
 
</div>

Quelle

2016-05-06 07:44:38

CSS erweitert Text auf Hover

Antwort

Verwandte Themen