Estilização de mouseovers em mapas de imagens com CSS

Ao criar páginas da web interativas, muitas vezes é necessário incluir imagens com áreas clicáveis. Normalmente, isso é conseguido usando mapas de imagens. No entanto, estilizar essas áreas ao passar o mouse para fornecer interatividade adicional tem se mostrado difícil.

No passado, a tentativa de estilizar essas áreas usando CSS teve sucesso limitado, conforme demonstrado pelo exemplo fornecido:

area { border: 1px solid #d5d5d5; }

Solução somente CSS

Felizmente, há uma solução alternativa simples usando apenas CSS:

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}
Nesta abordagem, blocos transparentes são colocados sobre a imagem, cada um representando uma área clicável. Ao definir a opacidade como 0 por padrão e aumentá-la para 0,2 ao passar o mouse, um efeito sutil de passagem do mouse é obtido.