Hallo,
ich bin neu hier weil ich ein Problem mit einem privaten Übung habe, die ich gerade für mich absolviere:
Hier ist das HTML:
Code
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://fakeimg.pl/50x50/?text=cart+icon">
</a>
</div>
<div class="body">
<ul>
</ul>
<div class="cart-subtotals">
<div class="products">
<span class="label">Partial sum</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
<div class="shipping">
<span class="label">Shipping</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
</div>
<div class="cart-total">
<span class="label">Total sum</span>
<span class="value">0</span>
</div>
</div>
</div>
</div>
Alles anzeigen
Und hier das CSS dazu:
Code
#blockcart-wrapper .cart-preview .header {
border: none;
}
#blockcart-wrapper .cart-preview .header .cart-icon {
width: 25px;
height: 28px;
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
display: none;
width: 400px;
background-color: #fff;
right: 0;
}
.cart-preview:hover .body {
display: block;
position: absolute;
}
.cart-preview.cart-overview {
width: 100%;
position: inherit;
}
.cart-preview.cart-overview .body {
display: block;
position: inherit;
width: 100%;
}
.cart-preview .header > :first-child {
float: left;
}
.cart-preview .header > :last-child {
float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
clear: both;
content: "\A0";
}
.cart-preview .body {
border: 1px solid #808080;
padding: 2px;
}
.cart-preview ul {
margin: 0;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.cart-preview li {
list-style: none;
margin-bottom: 15px;
}
.cart-preview li > * {
display: inline-block;
vertical-align: top;
}
.cart-preview li .product-quantity {
color: #666;
width: 10%;
}
.cart-preview .product-quantity::after {
content: 'x';
}
.cart-preview li .product-name {
width: 50%;
}
.cart-preview li .product-price {
width: 20%;
}
.cart-preview li .remove-from-cart {
text-indent: 100%;
display: inline-block;
overflow: hidden;
vertical-align: middle;
text-decoration: none;
color: inherit;
font-weight: bold;
width: 2em;
white-space: nowrap;
float: right;
}
.cart-preview li .remove-from-cart::before {
content: 'X';
text-indent: 0px;
border: 1px solid #ccc;
border-radius: 100%;
width: 1em;
height: 1em;
padding: 2px;
text-align: center;
background-color: #333;
color: #fff;
float: left;
}
.cart-preview .cart-totals .label {
float: left;
}
.cart-preview .cart-totals .value {
float: right;
}
.cart-preview .cart-totals > div {
clear: both;
border-bottom: 1px solid #ccc;
}
.cart-preview .cart-totals > div:not(:last-child) {
margin-bottom: 5px;
}
.cart-totals .label {
font-weight: bold;
}
#blockcart-modal {
position: fixed;
background-color: rgba(255,255,255,0.1);
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
#blockcart-modal > div {
padding: 20px;
display: inline-block;
min-width: 50%;
min-height: 400px;
margin-top: 200px;
text-align: left;
background-color: #fff;
z-index: 100;
border: 1px solid #ccc;
}
Alles anzeigen
Nun möchte ich mir eine eigene Klasse machen, um den div 'body' von rechts nach links an seine Position einfliegen lassen. Dafür benötige ich Transitions, das weiß ich, aber ich komme nicht so wirklich weiter. Egal was ich mache, ich bekomme einfach keine Transition.
Ich habe bisher probiert: transition: 2s; in der Regel für .cart-preview:hover .body hinzugefügt, diverse Positionen verändert, aber alles ohne Erfolg
Kann mir hier jemand von euch helfen?