Pouvez-vous styliser les survols de cartes d'images avec du CSS pur ?

Les survols de souris sur les cartes d'images peuvent-ils être stylisés avec CSS ?

À l'aide des cartes d'images, vous pouvez créer des liens sur des images. Mais pouvez-vous appliquer des styles à ces zones lorsqu'un utilisateur les survole ?

Tentative de code et problème

L'extrait de code suivant a été tenté, mais sans succès :

<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; }

Solution CSS uniquement

Lorsque vous utilisez une image cliquable, vous pouvez appliquer des styles :hover aux éléments positionnés au-dessus de l'image. Cela simplifie le processus, éliminant le besoin de jQuery :

• Placez l'image en bas.
• Ajoutez deux blocs d'ancrage (<a>) avec un positionnement absolu et une opacité définie sur 0.
• Au survol, définissez l'opacité sur 0,2.

Exemple de code

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

<a>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!