Können Sie Imagemap-Mouseovers mit reinem CSS gestalten?

Können Mouseovers auf Imagemaps mit CSS gestaltet werden?

Mit Imagemaps können Sie Links auf Bildern erstellen. Aber können Sie Stile auf diese Bereiche anwenden, wenn ein Benutzer mit der Maus darüber fährt?

Codeversuch und Problem

Der folgende Codeausschnitt wurde versucht, war jedoch erfolglos:

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
  <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
  <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
  <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

Nur ​​CSS-Lösung

Bei der Verwendung einer Imagemap können Sie :Hover-Stile darauf anwenden Elemente, die über dem Bild positioniert sind. Dies vereinfacht den Prozess und macht jQuery überflüssig:

• Platzieren Sie das Bild unten.
• Fügen Sie zwei Ankerblöcke (<a>) hinzu, wobei die absolute Positionierung und die Deckkraft auf eingestellt sind 0.
• Stellen Sie beim Schweben die Deckkraft auf 0,2 ein.

Code Beispiel

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

<a>

Das obige ist der detaillierte Inhalt vonKönnen Sie Imagemap-Mouseovers mit reinem CSS gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!