是否可以使用CSS在图像地图上设置鼠标悬停样式？

Question

我在网页上有一张图片，该图片也需要链接。我正在使用图像映射来创建链接，并且我想知道是否存在一种方法可以将鼠标悬停时的区域形状设置为较小的交互性。这可能吗？

我尝试了一下但没有成功：

html

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

的CSS

area { border: 1px solid #d5d5d5; }

有什么建议么？