21.08.2018, 09:40
|
|||
|
|||
CSS einfliegen per Klasse
Hallo zusammen,
ich habe hier ein HTML, welches in für ein persönliches Lernprojekt habe (es handelt sich um einen simulierten Onlineshop). Hier ist erstmal das HTML: 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> 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;
}
Kann mir jemand helfen, eine eigene CSS-Klasse für dieses Problem zu erstellen? Ich weiß dass es mit Transitions geht, aber wenn ich im Selektor .cart-preview:hover .body transition: 2s; hinzufüge, sieht es genauso aus wie vorher. Daher würde ich gerne eine eigene Klasse machen, die man dann später auch mal per JavaScript hinzufügen und entfernen kann. Vielen Dank 
|
| Sponsored Links |
|
21.08.2018, 10:28
|
|||
|
|||
|
Zunächst mal eine Anmerkung... du solltest (darfst) keine Doppelpost machen
https://www.html-seminar.de/forum/th...1731#post51731 Sobald ein Admin/Moderator das sieht, wird in der Regel der Post gesperrt - das gilt für alle Foren, also bitte nur in einem Forum posten. Als Zweite Anmerkung ... du nutzt als Klassennamen sowas wie 'body' und 'header'! Das ist unglücklich - Klassennamen sollten nicht wie HTML Elemente bezeichnet werden. Das führt sonst zu Verwirrung und möglicherweise auch zu Fehlern. Zu deiner Frage: Du definierst in deinem CSS für .body 'display: none; und für den Hover - Effekt 'display: block;'. Damit wirst du kein 'einfliegen' erreichen - nur ein 'An / Aus'. Hier kannst du nur mit 'margin-right: -400px; und 'margin-right: 0px;' beim hover das gewünschte erzielen.
|
| Sponsored Links |
|
28.08.2018, 17:32
|
||||
|
||||
|
Sollte sowas nicht auch mit einfach CSS Transitions zu lösen sein?
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS Klasse nutzt andere CSS Klasse | web4free | CSS | 5 | 14.03.2011 09:46 |
| Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 12:25 |
| generierte Elemente per CSS vom Druck ausblenden | uspri | Javascript & Ajax | 19 | 15.05.2009 14:54 |
| CSS Klasse an anderer Stelle erweitern | Pari | CSS | 5 | 06.03.2009 08:33 |
| "Fusszeile" per CSS? | derSESO | CSS | 3 | 02.02.2005 00:44 |
Linear-Darstellung
