zunehmende Breite auf Hover, auf einem Quadrat padding-top: 100% div

Ich versuche, die Breite eines Div bei Hover zu erhöhen, während die Höhe gleich bleibt. Das ist hart, weil ich die Höhe von padding-top: 100% bekomme, was es erlaubt, ein veränderbares Quadrat zu sein. So natürlich, wie ich die Breite vergrößere, erhöht sich die Höhe auch organisch. (Es ist wichtig, dass die div Höhe und Breite in seinem normalen Zustand gleich sind, so ist es ein perfektes Quadrat)zunehmende Breite auf Hover, auf einem Quadrat padding-top: 100% div

Ich bin jetzt verloren und unsicher, wie dies zu erreichen ist, wird jeder Eingang geschätzt.

https://jsfiddle.net/9tc2mbwd/2/

.work-container { padding-top: 100%; }

Quelle

2016-07-20 Max Power

So brauchen Sie die 'padding-top'-Eigenschaft, weil Sie die Breite des div auf die 30% seines Containers setzen, der keine absolute Größe hat, und möchten, dass die Höhe gleich ist? – Nekomajin42

Ja, die Breite und Höhe müssen im Normalzustand gleich sein. Ich werde das klarer machen. –

Nur Ihre freundliche Erinnerung, um eine richtige Antwort zu wählen, wenn Sie eine sehen - es hilft jedem ein wenig heraus! –

Wenn Sie fix Breite und Höhe in .work-wrapper, nicht dann die .work-container, die hovered- Element Make .. einstellen wollen und wie dies zu tun:

.work-wrapper { 
 
width: 30%; 
 
} 
 
.work-container { 
 
    padding-top: 100%; 
 
    width: 100%; 
 
    transition: all ease 0.5s; 
 
} 
 
.work-container:hover { 
 
    width: 200%; 
 
} 
 
.work-1 { 
 
    background-color: #FEF102; 
 
}

<div class="work-wrapper"> 
 
    <div class="work-container work-1"> 
 
    </div> 
 
</div>

Quelle

2016-07-20 01:56:53 Jefsama

Sieht aus wie die beste Antwort, ich werde sehen, ob es funktioniert und wiederkommen, um es richtig zu markieren :) –

Hoffe, meine Antwort ist das Beste für Ihre Bedürfnisse :) – Jefsama

Sicher war, nicht sicher, wie ich nicht darüber dachte. Danke vielmals. –

Sie Ansichtsfenster Einheiten verwenden können, und erhalten von arbeits Wrapper befreien, wie folgt aus:

.work-container { 
 
\t width: 30vw; 
 
\t height: 30vw; 
 
\t transition: all ease 0.5s; 
 
} 
 

 
.work-container:hover { 
 
\t width: 50vw; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
}

<div class="work-container work-1"> 
 
</div>

Quelle

2016-07-20 01:51:21

Nützlicher Tipp, aber leider ist es in einem anderen Div, es ist% basiert nicht auf der Breite des Darstellungsbereichs. –

-1

Nun, können Sie durch das Loswerden beginnen der Prozentsätze und das Hinzufügen zu ".work-Wrapper":

width:150px; 
height:150px; 
overflow: hidden;

und halten Sie alles gleich! Hoffe, das hilft!

Quelle

2016-07-20 01:51:40

Danke, aber es muss vollständig reagieren, also die% -Werte. –

zunehmende Breite auf Hover, auf einem Quadrat padding-top: 100% div

Antwort

Verwandte Themen