Wie kann ich HTML-Bereichs-Tags beim Hover formatieren?

Bewegen des Mauszeigers über das HTML-Bereichs-Tag

Um den Mauszeiger über den HTML-Bereichs-Tag zu bewegen, können Sie die Pseudoklasse :hover verwenden. Mit dieser Pseudoklasse können Sie Stile angeben, die angewendet werden, wenn der Benutzer mit der Maus über ein Element fährt.

Hier ist ein Beispiel dafür, wie Sie die Pseudoklasse :hover verwenden können, um die Rahmenfarbe eines Bereichs zu ändern Tag, wenn der Benutzer mit der Maus darüber fährt:

area:hover {
  border: 1px solid black;
}

Dieses CSS ändert die Rahmenfarbe jedes Bereichs-Tags in Schwarz, wenn der Benutzer mit der Maus darüber fährt it.

Zusätzliche Informationen

• Das Area-Tag wird verwendet, um einen anklickbaren Bereich auf einem Bild zu definieren.
• Das :hover-Pseudo- Die Klasse wird verwendet, um Stile anzugeben, die angewendet werden, wenn der Benutzer mit der Maus über ein Element fährt.
• Die Eigenschaft „Border“ wird verwendet, um die Breite, den Stil usw. anzugeben. und Farbe des Randes eines Elements.

Beispiel

Der folgende Code zeigt ein Beispiel für die Verwendung des Area-Tags und der Pseudoklasse :hover Erstellen Sie ein anklickbares Bild mit einem schwarzen Rand, wenn der Benutzer mit der Maus darüber fährt:

<img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" usemap="#my-image-map" alt="Wie kann ich HTML-Bereichs-Tags beim Hover formatieren?" >

<map name="my-image-map">
  <area shape="rect" coords="0, 0, 100, 100" href="my-link.html" alt="My Link">
</map>

<style>
  area:hover {
    border: 1px solid black;
  }
</style>

In diesem Beispiel definiert das Bereichs-Tag einen anklickbaren Bereich auf dem Bild mit der ID my-image. Wenn der Benutzer mit der Maus über das Bild fährt, ändert die Pseudoklasse :hover die Rahmenfarbe des Bereichs in Schwarz.

Das obige ist der detaillierte Inhalt vonWie kann ich HTML-Bereichs-Tags beim Hover formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!