Wie kann ich einen Text über CSS verschwinden lassen, wenn ich mit der Maus drüber fahre.

  • Folgendes Dilemma:


    Beim Aufrufen der Seite soll ein grünes Feld mit weißem Text erscheinen. Wenn ich mit der Maus über das grüne Feld gehe, soll ein anderes Feld (hier ein Bild) mit anderem weißem Text erscheinen.


    Ich habe die Felder mit Blöcken (#XXX) und die Schriften (#XXX p) mit :hover in CSS programmiert. Die Felder wechseln, wenn ich mit der Maus drüber gehe. Klappt perfekt. Aber beide Texte bleiben beim Aufrufen der Internetseite (also ohne Maus) von beiden Feldern sichtbar. Im Prinzip ist das ja auch richtig, da im HTML Code schließlich der Text von beiden erscheint. Wenn ich dann mit Maus über den Text gehe, klappt dann der Text vom hier grünen Feld weg. Somit klappt das.


    Aber warum kann ich die Schrift vom Feld mit dem Bild nicht einfach beim Aufrufen der Seite transparent machen, damit er unsichtbar ist (so habe ich das mit den Feldern gemacht - opacity: 1; - ).

    Vielleicht kann mir einer den Befehl dazu sagen. Meine Suche war bisher nicht besonders erfolgreich.


    Hoffentlich muss ich jetzt nicht mit Javascript anfangen. So weit bin ich nicht nicht.


    Danke schon mal im Voraus.


    Hier der HTML Code (Auszug)

    Code
    1. <div id="einsterneinbergbox"><p>einstern<br>einberg<br>.de</p></div>
    2. <div id="sternbergbox"><p>Konrad<br>Sternberg</p></div>

    Hier CSS (Auszug)

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von olkostbe () aus folgendem Grund: Kleiner Grammatikfehler korrigiert.

  • So funktioniert es (mit dem richtigen Bild) ; getestet in Chrome, Edge und Firefox: