Wie ändert man die Farbe eines Divs durch Bewegen der Maus?

Autor: Janice Evans
Erstelldatum: 28 Juli 2021
Aktualisierungsdatum: 22 November 2024
Anonim
Wie ändert man die Farbe eines Divs durch Bewegen der Maus? - Artikel
Wie ändert man die Farbe eines Divs durch Bewegen der Maus? - Artikel

Inhalt

DIV-Tags (Abkürzung für "split") definieren einen Abschnitt eines HTML-Dokuments und werden häufig in der CSS-Sprache verwendet, um das grundlegende Layout einer Website zu erstellen. Ein DIV kann mithilfe von CSS angepasst werden, um Ränder, Abstände, Ränder, Textgröße, Ausrichtung oder Hintergrundfarbe zu definieren sowie fortgeschrittene Tricks, z. B. das Ändern der Farbe des DIV, wenn ein Benutzer den Mauszeiger darüber bewegt.


Anweisungen

Mit der CSS-Sprache können Sie Tricks anwenden, um die Benutzerinteraktion mit der Seite zu verbessern (Comstock / Comstock / Getty Images)
  1. Öffnen Sie das Dokument von Ihrer Webseite in einem Texteditor.

  2. Stellen Sie den Cursor auf eine leere Zeile zwischenund'.

  3. Geben Sie "type = 'text / css'>" ein und drücken Sie "Enter". Damit erstellen Sie ein CSS-Skript.

  4. Geben Sie "# div1: hover {background-color: # ff0000;}" ein und drücken Sie "Enter". Dadurch wird ein DIV-Container mit dem Wert "div1" als ID-Eigenschaft unter Verwendung der Hintergrundfarbe "# ff0000" (ein Hexadezimalwert) angepasst, wenn der Status "hover" aktiviert ist. Dies geschieht, wenn der Mauszeiger darüber platziert wird der DIV. Diese ID- und Hintergrundfarbenwerte können bei Bedarf geändert werden.


  5. Typ "", um das CSS-Skript-Tag zu schließen.

  6. Platzieren Sie den Textcursor in einer leeren Zeile zwischen den Tags "" und "".

  7. Geben Sie "" ein und drücken Sie "Enter", um einen DIV-Container mit dem ID-Wert "div1" zu erstellen. Wenn Sie den ID-Namen in Schritt 4 geändert haben, müssen Sie hier denselben Namen eingeben.

  8. Geben oder fügen Sie einen Inhalt ein, der in das DIV aufgenommen werden soll, und drücken Sie "Enter".

  9. Geben Sie "" ein, um den DIV-Container zu schließen.

  10. Klicken Sie auf "Datei" und "Speichern", um das Dokument zu speichern.