Robin808
01.02.2025, 18:01
Wie kann ich bei folgender CSS-Animation den Text sichtbar lassen?

Hi, ich bin neu im Thema Animationen & Co. in CSS und komme jetzt beim Ausprobieren nicht mehr weiter: Ich möchte ein "Button" (in diesem Fall ein <div>), bei dem beim Hovern von links nach rechts eine Hintergrundfarbe kommt. Jedoch verschwindet bei mir dann auch der Text.

Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <style>
        .box {
            position: relative;
            margin-top: 50px;
            width: 200px;
            height: 75px;
            background-color: transparent;
            border-radius: 15px;
            border: 3px solid lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Ubuntu';
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }
        .box:hover {
            color: white;
        }


        .box::after{
            position: absolute;
            left: 0;
            content: '';
            background-color: lightgreen;
            width: 0;
            height: 75px;
            border-radius: 11px;
            transition: all 0.5s ease-in-out;
            z-index: 0;
        }
        .box:hover::after{
            width: 200px;
        }



    </style>
</head>
<body>
    <div class="box">Hello</div>
</body>
</html>
...zum Beitrag
Antwort
von Robin808
01.02.2025, 18:18

Ich habe gerade selber eine Lösung gefunden: Man kann einfach noch in dem <div> ein <span>-Element erstelle, bei dem man dann z-index einstellen kann.

 ...zur Antwort
BillC598
14.05.2022, 19:55
Ist die Urknall Theorie eine Lüge?

Die Urknall Theorie wurde von einem Jesuiten er- oder gefunden, welcher diese als eine plausible Antwort auf die Frage nach dem Ursprung des Universums bietet. Es ist bis heute eine These, ohne wissenschaftlichen Beweis. Es wird so getan, als ob dies zweifelsfrei so gewesen sei. Es stellt sich die Frage, warum es nicht als Mythos dargestellt wird. Die Wissenschaft versucht mit komplizierten Verfahren, unüberprüfbaren Argumenten und Berechnungen die Richtigkeit zu suggeriere. Und wir glauben den hokus pokus.

...zum Beitrag
Antwort
von Robin808
21.01.2025, 14:58
Ich glaube an die göttliche Schöpfung

Ich gleube 100%ig an die Schöpfung der Erde durch Gott. Ein paar Fragen, GEGEN die Evolutionstheorie:

  • Woher kommt das ursprüngliche Masse-Energie-Potential?
  • Wie kam es dazu sich auszudehnen?
  • Wo ist das Übergangsglied vom Tier zum Menschen?
  • Warum gibt es heute keine Übergangsformen in der Natur?
  • Warum ist die Entwicklung stehengeblieben?
  • Woher hat der Mensch das moralische Bewusstsein?

Beispiele:

  • Jedes Bauwerk (z. B. ein Haus) wurde von jemandem geschaffen. Wie kann dann eine Zelle, die viel komplizierter ist, von allein entstanden sein?
  • Wenn etwas sich selbst überlassen bleibt (z. B. ein Garten) nimmt dort die Unordnung zu. Wie sollte da unsere Welt ohne die Weisheit eines Schöpfers so schön geworden sein?

Was macht mehr Sinn – eine sinnlose Evolution oder ein weiser Schöpfer?

 ...zur Antwort
Robin808
26.04.2024, 20:47
JS- Komischer Fehler bei Variable?

Hallo, ich schreibe grad so nen ChatRoom und da ist eine JS-Funktion, die nicht richtig funktioniert. Ich habe schon KI gefragt, aber er konnte keine Lösung finden, also stelle ich die Frage hier.

Die Funktion, um die es geht ist folgende:

async function login() {
  const codeInput = document.getElementById('code-input').value;
  const response = await fetch('users.json');
  const users = await response.json();
  let uname = false; // Verwendung von 'let' statt 'var'


  for (let i = 0; i < users.length; i++) { // Verwendung von 'let' statt 'var'
    if (users[i].usercode === codeInput) {
      console.log("UserName:", users[i].username);
      uname = users[i].username;
      break;
    }
  }


  if (uname) {
    document.getElementById('login-container').style.display = 'none';
    document.getElementById('chat-container').style.display = 'block';
    loadMessages();
    window.intervalId = setInterval(loadMessages, 2500);
  } else {
    alert('Ungültiger Code. Bitte versuche es erneut.');
  }
}

Bei console.log kommt der Richtige Username, aber direkt danach, bei uname = users[i].username; kommt einfach nur undefined.

Danke im voraus.

 ...zum Beitrag
Antwort
von Robin808
27.04.2024, 12:11

Ich habe die Lösung gefunden. War ein dummer Fehler von mir.

Im Chatroom wurde der Benutzername über die "username"-Variable genommen. Da ich in der Funktion nur "uname" hatte, kam da undefined.

Aber trotzdem danke für eure Hilfe!

 ...zur Antwort