kostenloser Webspace werbefrei: lima-city


CSS Pseudoklasse (:hover , :click) auf Element mit ID beziehen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Das Ein- und Ausblenden funktioniert aber nur über Javascript, soweit ich das weiß.
    Ich habe auch noch keine andere Möglichkeit gesehen.
  4. Autor dieses Themas

    technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    na ja, also mit den Pseudoklassen kann man ja bei einem Highlight, sei es ein mouseover oder ein klick, Eigenschaften verändern... das einzige was mir jetzt noch fehlt ist der Teil mit der ID... wenn einer weiß, wie man das auf IDs bezieht, raus mit der Sprache ^^
  5. 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.
  6. Autor dieses Themas

    technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    joa, ca sowas mein ich, aber ich raff net, wie de das gemacht hast. x.x
  7. 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.
  8. Autor dieses Themas

    technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    ahhhso, ok... ich versuchs mal ^^ Vielen Dank schonmal, wenns net klapt, melde ich mich wieder ^^
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!