Wie kann ich Mouseovers auf Imagemaps mit CSS gestalten?

Mouseovers auf Imagemaps mit CSS gestalten

Imagemaps bieten eine praktische Möglichkeit, anklickbare Bereiche innerhalb eines Bildes zu erstellen. Allerdings fehlt diesen Bereichen standardmäßig ein visuelles Feedback, wenn Sie mit der Maus darüber fahren. CSS bietet begrenzte Optionen zum Gestalten von Mouseovers auf Imagemaps, aber hier ist eine Lösung, um einen subtilen Hauch von Interaktivität hinzuzufügen:

Ansatz:

Verwenden von :hover auf Divs oder Anchor Tags

• Erstellen Sie transparente Div- oder Anker-Tags, die direkt über den anklickbaren Bereichen positioniert sind.
• Setzen Sie die Deckkraft dieser Elemente zunächst auf 0.
• Styling hinzufügen zu: Schwebezustand dieser Elemente, um ihre Deckkraft zu ändern und so einen sichtbaren Schwebeeffekt zu erzeugen.

Beispiel:

<a>

.area {
  background: #fff;
  display: block;
  height: 475px;
  opacity: 0;
  position: absolute;
  width: 320px;
}
#area2 {
  left: 320px;
}
#area1:hover, #area2:hover {
  opacity: 0.2;
}

In diesem Beispiel ist das Die Klasse .area definiert den Stil für die transparenten Div- oder Anker-Tags. Die :hover-Regel ändert die Deckkraft auf 0,2, wenn Sie mit der Maus über die anklickbaren Bereiche fahren und so einen subtilen Hervorhebungseffekt erzielen.

Hinweis: Aufgrund der Einschränkungen kann nicht garantiert werden, dass dieser Ansatz in allen Browsern funktioniert von CSS beim Gestalten von Imagemaps. Es bietet jedoch eine relativ einfache Lösung zum Hinzufügen grundlegender Hover-Effekte zu Bildkartenbereichen.

Das obige ist der detaillierte Inhalt vonWie kann ich Mouseovers auf Imagemaps mit CSS gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!