Stefan: Popup ohne Javascript

Hallo,

Ich versuche gerade ein wenig mit CSS zu experimentieren. Dabei müsste es doch eigentlich machbar sein, mit :hover-Effekten ein Popup hinzukriegen, ohne JS zu nutzen. Die überlegung war folgende:

HTML:

<div class="popup">
Hier dann etwas Content
</div>

CSS:

.popup {
visibility:hidden;
// Angaben zur Positionierung, Hintergrund etc.
}

.popup:hover {
visibility:visible;
}

Nun scheint es aber so, dass Hover-Effekte bei hidden nicht funktionieren (zumindest in Mozilla und Konqueror nicht).

Hat da noch einer eine andere Idee, wie man sowas realisieren kann. Es muss nicht in allen Browsern laufen (Einer genügt, da es experimentell ist), aber es muss valide sein und ohne JS.

Stefan

  1. Hi Stefan,

    Ich versuche gerade ein wenig mit CSS zu experimentieren. Dabei müsste es doch eigentlich machbar sein, mit :hover-Effekten ein Popup hinzukriegen, ohne JS zu nutzen.

    Kai hat so etwas gebastelt: http://mozilla.linuxfaqs.de/

    Funktioniert auch mit Netscape 4 >;)

    LG Orlando

    --
    SELF-TREFFEN 2002
    http://www.rtbg.de/selftreffen/
    http://www.megpalffy.org/temp/penneninhh.html

    1. Hi zusammen

      Kai hat so etwas gebastelt: http://mozilla.linuxfaqs.de/

      ups ... ich habe diese Seite gerade mal mit M$IE 5.5 geladen
      (mit Opera 6.04 ist sie völlig mikroverfilmt, ich muß die Schrift sechsmal
      hochskalieren, um etwas lesen zu können, dann aber springt mir die Navi-
      gationsleiste fast ins Gesicht) ... und was bekam ich dann wohl als Meldung?

      "Ein ActiveX-Steuerelement auf dieser Seite ist nicht sicher.
       Die aktuellen Sicherheitseinstellungen unterbinden, nicht sichere
       Steuerelemente auf dieser Seite auszuführen.
       Deshalb wird diese Seite möglicherweise nicht wie beabsichtigt angezeigt."

      ActiveX - pfui! Was ist dieser Kai nur für ein pöser Pube!

      Grinsende Grüße
                Michael

      P.S.: Die Meldung kommt übrigens von dem XML/MathML-Objekt am Dokument-Ende.

      1. hallo Michael,

        Kai hat so etwas gebastelt: http://mozilla.linuxfaqs.de/
        ups ... ich habe diese Seite gerade mal mit M$IE 5.5 geladen

        jaja, und auf einem Win98-Rechner, tststs

        ActiveX - pfui! Was ist dieser Kai nur für ein pöser Pube!

        Jetzt bist du aber ungerecht. Ein "pöser Pube" ist er nur für dein Win98 und deinen IE 5.5, die beide nicht zulassen, daß <object>-tags verschachtelt werden. Und weil du dir keine individuellen Fehlermeldungen gebastelt hast, kriegst du eben die "Standard-Meldung", die aus einer Zeit stammt, in der XML von Microsoft noch nicht berücksichtigt wurde und MathML völlig unbekannt war.
        Kuck dir das Ganze mit WindowsXP an, und alles wird gut ;-)

        Grinsende Grüße

        jo, von mir auch

        Christoph S.

        1. hi

          Jetzt bist du aber ungerecht. Ein "pöser Pube" ist er nur für dein Win98 und deinen IE 5.5, die beide nicht zulassen, daß <object>-tags verschachtelt werden. Und weil du dir keine individuellen Fehlermeldungen gebastelt hast, kriegst du eben die "Standard-Meldung", die aus einer Zeit stammt, in der XML von Microsoft noch nicht berücksichtigt wurde und MathML völlig unbekannt war.
          Kuck dir das Ganze mit WindowsXP an, und alles wird gut ;-)

          ich hab' schon so einige "Brucklandungen" des MSIE an MathML gesehen, da ist die ActiveX-Warnung nur eine Auswahl von ;)

          Noch besser kommt das DHTML-Menü, bei dem ich leider immer wieder vergessen, dass der IE _keinen_ "+"-Selector versteht...

          Grüße aus Bleckede

          Kai

  2. Hallo,

    Ich versuche gerade ein wenig mit CSS zu experimentieren. Dabei müsste es doch eigentlich machbar sein, mit :hover-Effekten ein Popup hinzukriegen, ohne JS zu nutzen. Die überlegung war folgende:

    HTML:

    <div class="popup">
    Hier dann etwas Content
    </div>

    CSS:

    .popup {
    visibility:hidden;
    // Angaben zur Positionierung, Hintergrund etc.
    }

    .popup:hover {
    visibility:visible;
    }

    Nun scheint es aber so, dass Hover-Effekte bei hidden nicht funktionieren (zumindest in Mozilla und Konqueror nicht).

    Hat da noch einer eine andere Idee, wie man sowas realisieren kann. Es muss nicht in allen Browsern laufen (Einer genügt, da es experimentell ist), aber es muss valide sein und ohne JS.

    Hallo Stefan,

    hover bei hidden IMHO tatsächlich nicht. Wenn der Hintergrund hinter dem Layer einfarbig ist und du in dem (visible) Layer (popup ist hier vielleicht ein irreführender Begriff) wirklich nur Text anzeigen willst, könntest du vielleicht die Schriftfarbe defaultmäßig auf die Hintergrundfarbe einstellen und beim hover dann die Schriftfarbe ändern - dadurch wird sie dann sichtbar. Funktioniert natürlich nicht in Netscape 4.x.
    Weiß nicht, ob das weiterhilft, aber einen Versuch war's ja wert ;-)

    Gruß: kaspar

  3. Hallo,

    Ich versuche gerade ein wenig mit CSS zu experimentieren. Dabei müsste es doch eigentlich machbar sein, mit :hover-Effekten ein Popup hinzukriegen, ohne JS zu nutzen. Die überlegung war folgende:

    HTML:

    <div class="popup">
    Hier dann etwas Content
    </div>

    CSS:

    .popup {
    visibility:hidden;
    // Angaben zur Positionierung, Hintergrund etc.
    }

    .popup:hover {
    visibility:visible;
    }

    Nun scheint es aber so, dass Hover-Effekte bei hidden nicht funktionieren (zumindest in Mozilla und Konqueror nicht).

    Hat da noch einer eine andere Idee, wie man sowas realisieren kann. Es muss nicht in allen Browsern laufen (Einer genügt, da es experimentell ist), aber es muss valide sein und ohne JS.

    Jep, nimm statt dem hidden div hover doch nen clearpixel mit rein und gib dem den hover effekt.

    Stefan

    T!M

  4. Moin!

    .popup {
    visibility:hidden;
    // Angaben zur Positionierung, Hintergrund etc.
    }

    .popup:hover {
    visibility:visible;
    }

    Du kannst nicht mit der Maus etwas hovern, was garnicht angezeigt wird. Du brauchst ein sichtbares Element, über das du fahren kannst, um das unsichtbare Element anzuzeigen.

    Und dann hast du noch mit der Schwierigkeit zu kämpfen, daß alle Browser bis auf Mozilla das :hover derzeit nur auf Links beziehen, aber nicht auf beliebige Elemente. Soweit hat vermutlich noch keiner gedacht, als CSS sich entwickelt hat.

    - Sven Rautenberg

    1. Und dann hast du noch mit der Schwierigkeit zu kämpfen, daß alle Browser bis auf Mozilla das :hover derzeit nur auf Links beziehen, aber nicht auf beliebige Elemente. Soweit hat vermutlich noch keiner gedacht, als CSS sich entwickelt hat.

      Konqueror kann div:hover

      Stefan

  5. hi

    Ich versuche gerade ein wenig mit CSS zu experimentieren. Dabei müsste es doch eigentlich machbar sein, mit :hover-Effekten ein Popup hinzukriegen, ohne JS zu nutzen. Die überlegung war folgende:

    guck mal auf meine Mozilla-Seite (URL oben) mit Mozilla drauf, das Menü rechts arbeitet genauso.

    Grüße aus Bleckede

    kai