解决：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');        });    }

转载于:https://www.cnblogs.com/Better-Me/p/4260533.html

相关资源：js 动态获取图片矩形热区，并在热区上添加蒙版，鼠标经过，以半透明形式显示该区域