css的area标签是不支持hover的，只有a标签才支持。li标签在IE浏览器下才支持，因此采用jquery的mouseenter和mouseleave事件完成。首先讲jQuery对应的事件：
1.mouseenter事件
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一块儿使用。css
与 mouseover 事件不一样，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。若是鼠标指针穿过任何子元素，一样会触发 mouseover 事件。html
参数
fnFunctionV1.0
在每个匹配元素的mouseenter事件中绑定的处理函数。jquery
[data],fnString,FunctionV1.4.3
data:mouseenter([Data], fn) 可传入data供函数fn处理。浏览器
fn:在每个匹配元素的mouseenter事件中绑定的处理函数。函数
示例
描述:
当鼠标指针进入（穿过）元素时，改变元素的背景色：post
jQuery 代码:
$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
2.mousedown 事件
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一块儿使用。this
与 mouseout 事件不一样，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。若是鼠标指针离开任何子元素，一样会触发 mouseout 事件。spa
参数
fnFunctionV1.0
在每个匹配元素的mouseleave事件中绑定的处理函数。指针
[data],fnString,FunctionV1.4.3
data:mouseleave([Data], fn) 可传入data供函数fn处理。code
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');
});
}