zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Styles an überliegende Elemente zuweisen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.09.2016, 04:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2016
Beiträge: 3
pindoyu befindet sich auf einem aufstrebenden Ast
Unglücklich Styles an überliegende Elemente zuweisen

Hallo Zusammen,

Mit den Händen über dem Kopf such ich nun hier Hilfe.
Ich plane ein Menü aus Quadraten zu bauen.

Die Kacheln sollen animiert sein und werden nachher per JavaScript ihre Inhalte bekommen.
So weit so gut habe ich bereits folgendes zusammen gezimmert:

Create a New Pen

Jetzt zum Problem:
Mein Wunsch ist es, dass jeweils alle Kacheln umschlagen außer der, über der gerade der Mauszeiger ist (Hover). Das klappt nur bedingt - nur die nachfolgenden Kacheln übernehmen den Effekt. Bin ich jedoch über z.B. der zweiten Kachel, schlägt die erste nicht um, über der dritten Kachel die Erste und Zweite,...

Ich weiß gerade echt nicht mehr weiter und hoffe das mir jemand bei dem (wohlmöglich kleinen-) Problem helfen kann.

Mit Dank im Voraus,

Matthias
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.09.2016, 19:12
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Eine reine CSS-Lösung könnte so aussehen:
Hover über die (gesamte) Liste (ul) dreht alle Listenelemente (li).
Hover über ein Listenelement verhindert, dass sich das jeweilige Element dreht.
So in etwa:
Code:
nav ul:hover .front { transform:rotateY(180deg); }
nav ul:hover .back { transform:rotateY(0deg); }

nav ul li:hover .front { transform:rotateY(0deg); }
nav ul li:hover .back { transform:rotateY(180deg); }
Zuerst müsstest Du aber die Floats einschließen und dafür sorgen, dass die Liste (ul) immer nur so groß ist, dass alle Listenelemente rein passen.
Lücken dürfen dabei nicht entstehen. Zeilenweise muss also die Anzahl der Listenelemente immer gleich sein: also 1, 2, 3 oder 6 (alle). Aber nicht 4 oder 5 in der ersten Zeile. Denn dann ist die Zweite unvollständig (Lücken)

Wenn Dir das nicht passt, kannst Du es allein mit JavaScript lösen.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.09.2016, 11:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2016
Beiträge: 3
pindoyu befindet sich auf einem aufstrebenden Ast
Standard

Manchmal sieht man echt den Wald vor lauter Bäumen nicht...

Super! Vielen Dank! Das ist genau das was ich gebraucht hab!
Mit Zitat antworten
Antwort

Stichwörter
css, not, transitions, überliegende elemente

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Elemente unbrauchbar bei absolute Bara CSS 0 28.07.2010 07:18
Browser Zoom - Divs vergrößern sich nicht mit mathias81 CSS 19 04.08.2009 09:58
Mehr (unnötige) Elemente oder weniger Flexibilität? Pleex CSS 3 13.05.2009 23:17
Welche Positionierung für elemente eines Formulas? bastien CSS 3 01.01.2007 23:31
Immer mehr Styles fraggy CSS 10 18.03.2005 09:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:18 Uhr.