CSS Pseudoklasse (:hover , :click) auf Element mit ID beziehen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anregung
anwendungsbeispiel
background
bild
container
display
eigene klasse
grundsatz
grenangabe
highlight
hintergrund
id
margin
sichtbares bild
span
spezielle definitionen
unterklasse
vielen dank
vordergrund
zeile
-
Hallo leute
ich möchte eine Homepage sehr dynamisch gestallten und möglichst in Echtzeit ABER OHNE JAVASCRIPT.
Ihr wisst ja bestimmt, dass man bei CSS Effekte einblenden kann oder Divs ein und ausblenden kann. genau das möchte ich jetzt machen, nur soll sich das Ein und ausblenden auf ein anderes Div beziehen. Wenn ich also auf div1 klicke, soll div2 ausgeblendet werden. Weiß jemand, wie man soetwas der gleichen verwirklicht?
Gruß
Technofan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das Ein- und Ausblenden funktioniert aber nur über Javascript, soweit ich das weiß.
Ich habe auch noch keine andere Möglichkeit gesehen. -
Also mit :click, hab ich keine Erfahrungen, aber mit :hover kann man durchaus Elemente \"erscheinen\" lassen. Ich hab das bei meiner Gallery verwendet, kannst du dir ja mal ansehen: http://images.cacophonie.de/?show=epp_07
Wenn du dir sowas in der Art vorstellst und mit den Quelltext nixht zurecht kommst, kann ich dir vll auch weiterhelfen. -
joa, ca sowas mein ich, aber ich raff net, wie de das gemacht hast. x.x
-
Also die Anregung dazu hab ich vor hier: http://www.cssplay.co.uk/menu/
Der Aufwand ist hlt eigentlich, das man für jedes Bild (in meinem Fall) eine eigene Klasse erstellen muss, damit beim Überfahren mit der Maus, auch das richtige Bild vergrößert wird. Das erledigt ein PHP-Script für mich, dewegen ist der Quellcode auch so unübersichtlich. Im Grundsatz, ist die Datei aber so aufgebaut
// Styledefinitionen für Hintergrund background{ } // allgemeine Links a:link, a:visited, a:hover{ } // den div, wo alles drinne steckt #container{ } // der div für die zeilen .lines{ } // der div für die bilder ansich (unterklasse von .lines) .lines .pics{ } <div id=container> // container <div class=lines> //zeilen // spezielle definitionen für das bild im nachfolgenden link a.show_0 img{ } a.show_0:hover img{ z-index: 0; //damit das bild im hintergrund bleibt } // spezielle definitionen für den span, der erst unsichtbar ist und beim hover erscheint (unterklasse von show_0) a.show_0 span img{ visibility: hidden; // unsichtbar z-index: 0; //im hintergrund position: relative; //relative position zum übergeordneten div display: block; //blocksatz width: 1px; //größenangaben, damit er schonmal beim seitenaufrug geladen wird height: 1px; //dito } a.show_0:hover span img{ visibility: visible; // werde sichtbar beim hover z-index: 100; // in den vordergrund position: absolute; // absolute zum übergeordneten div, damit das bild sich beim scrollen nicht verschiebt display: block; // blocksatz width: 341.333333333px; //höhe abhängig vom bild das gezeigt wird height: 256px; // breite abhängig vom bild das gezeigt wird margin-top: -50px; //positionierung margin-left: 20px; } <div class=pics> //bild <a href=\"\" class=\'show_0\'> // linkbeginn <img src=\'thumbs_wallies/thumb_100.jpg\'></img> //immer sichtbares bild (das thumbnail) <span><img src=\'thumbs_wallies/thumb_100.jpg\'></img></span> // der unsichtbare span, der nach hover des links sichtbar wird </a> // linkende </div> //bildende </div> //zeilenende </div> // containerende
Vll hilft dir das ein wenig weiter. Ich hab selbst ne Weile gebraucht, bis ich das so hatte, wie ich es wollte. Man kann das sicherlich auch noch weiter verzweigen. Schau dir einfach mal die Seite oben an, da gibts noch mehr Anwendungsbeispiele. -
ahhhso, ok... ich versuchs mal ^^ Vielen Dank schonmal, wenns net klapt, melde ich mich wieder ^^
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
