|
|||
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 |
|
|||
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 |
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 |