如何在地图区域坐标上添加悬停样式？

Question

我在区域标签上添加样式时遇到问题。

HTML代码：

<p>
        <img name="usaMap" src="images/animal-map.png" usemap="#animalMap" width="100%">
    </p>

    <map name="animalMap" id="animalMap">
        <area alt="" title="home" href="http://google.com.au" shape="poly" coords="733,591,735,643,808,642,801,584" class="area" />
        <area alt="" title="information" href="#" shape="poly" coords="676,700,684,790,759,785,754,707" class="area"/>
        <area alt="" title="tree" href="#" shape="poly" coords="540,280,558,334,654,323,639,268" class="area"/>
        <area alt="" title="foodcourt" href="#" shape="poly" coords="300,389,384,385,378,449,309,449" class="area"/>
        <area alt="" title="exit" href="#" shape="poly" coords="465,657,625,658,614,753,474,747" class="area"/>
    </map>

CSS代码：

.area:hover {
    background-color: white;
}