Стилизация при наведении курсора мыши на карту изображения с помощью CSS

При создании интерактивных веб-страниц часто необходимо включать изображения с интерактивными областями. Обычно это достигается с помощью карт изображений. Однако стилизация этих областей при наведении курсора мыши для обеспечения дополнительной интерактивности оказалась труднодостижимой.

В прошлом попытки стилизовать эти области с помощью CSS имели ограниченный успех, о чем свидетельствует приведенный пример:

area { border: 1px solid #d5d5d5; }

Решение только для CSS

К счастью, есть простой обходной путь, использующий только CSS:

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}
При этом подходе поверх изображения размещаются прозрачные блоки, каждый из которых представляет собой кликабельную область. Установив непрозрачность по умолчанию равной 0 и увеличив ее до 0,2 при наведении курсора мыши, можно добиться легкого эффекта наведения курсора мыши.