css的area標簽是不支持hover的，只有a標簽才支持。li標簽在IE瀏覽器下才支持，所以采用jquery的mouseenter和mouseleave事件完成。首先講jQuery對應的事件：
1.mouseenter事件
當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。
與 mouseover 事件不同，只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。如果鼠標指針穿過任何子元素，同樣會觸發 mouseover 事件。
參數
fnFunctionV1.0
在每一個匹配元素的mouseenter事件中綁定的處理函數。
[data],fnString,FunctionV1.4.3
data:mouseenter([Data], fn) 可傳入data供函數fn處理。
fn:在每一個匹配元素的mouseenter事件中綁定的處理函數。
示例
描述:
當鼠標指針進入（穿過）元素時，改變元素的背景色：
jQuery 代碼:
$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
2.mousedown 事件當鼠標指針離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。
與 mouseout 事件不同，只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。如果鼠標指針離開任何子元素，同樣會觸發 mouseout 事件。
參數
fnFunctionV1.0
在每一個匹配元素的mouseleave事件中綁定的處理函數。
[data],fnString,FunctionV1.4.3
data:mouseleave([Data], fn) 可傳入data供函數fn處理。
fn:在每一個匹配元素的mouseleave事件中綁定的處理函數。
示例
描述:
當鼠標指針離開元素時，改變元素的背景色：：
jQuery 代碼:
$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });言歸正傳，下面就是解決Map的area屬性標簽鼠標Hover可以給area加背景的問題：
示例
html:
<div class="region">
<img src="static/images/region_city.png" usemap="#Map" class="region_button">
<map name="Map" id="map">
<area shape="rect" target="_blank" class="hotpoint shanghai" coords="0,0,173,166" href="enroll_shanghai.html">
<area shape="rect" target="_blank" class="hotpoint nanjing" coords="246,0,414,166" href="enroll_nanjing.html">
</map>
</div>
js:
if($('.region_button').length){
$('.hotpoint').unbind().bind('mouseenter',function(){
if($(this).hasClass('shanghai')){
$('.region_button').attr('src','images/region_city_1.png');
}else{
$('.region_button').attr('src','images/region_city_2.png');
}
}).bind('mouseleave',function(){
$('.region_button').attr('src','images/region_city.png');
});
}