解决：Map的area属性标签鼠标Hover可以给area加背景

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‘);
        });
    }