这是一款基于jQuery实现地图地图悬停显示省市代码，这样一个神奇的地图便于我们更好地了解中国，增加自己的地理知识。

下面是效果图是不是很棒。

效果演示源码下载

为大家分享的jQuery地图地图悬停显示省市代码如下

hearta charset=' utf-8 ' title jquery地图地图悬停显示省市代码/title脚本src=' http : js/lib/jquery-1。11 .1 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/lib/Raphael-min。js '/script脚本类型=' text/JavaScript ' src=' http : js/RES/chinmapconfig。js '/script脚本类型=' text/JavaScript ' src=' http :0划水：0;border:无；}车身{ color: # 333文本对齐：中心；font: 12px '微软雅黑；背景-颜色： # DCF 5 ed} .mapTipText { width : 280 pxheart : 110 px背景-color : # ffffff；} .mapTipText .mapTipImg { height: 66px宽度： 66px向左浮动：border: 2px实心# ffffff边界半径： 50%;飞越：隐藏；边距：-12px 5px 0-12px；} .mapTipText .mapTipImg img { width : 100%；高度： 100%;} .mapTipText .mapTipList{float:左侧；左边距left: 4px}。mapTipText .H2地图列表{左文本对齐：} .mapTipText .mapTipList H2 a { font-size : 24px；颜色： # 262626文本装饰：无；} .mapTipText .mapTipList H2 a :悬停{ color : # 0085 D2；} .mapTipText .mapTipList H2 a span { font-size : 16px；左边距left: 3px}。mapTipText .mapTipList ul { width: 203px填充-右： 10px} .mapTipText .mapTipList ul Li { list样式：无；向左浮动：padding: 7px 3px 0 3px }。mapTipText .阿利地图列表{ color: # 262626文本装饰：无；} .mapTipText .mapTipList ul阿利：悬停{背景色： # 2 ebcfecolor: # ffffff}/style脚本类型=' text/JavaScript ' $(function(){ $(' # ChinaMap ').SVGMap({ mapWidth: 806，mapheight : 396 })；});/script/head dydiv class=' Itemcon ' style=' float : left ' div id=' ChinaMap ' style=' margin : 50px；'/div div id=' StateTip ' style=' position : absolute；左： 100%;文本-左对齐：display : inline '/div/div div id=' mapTipContent ' style=' width : 900 px；margin: 0自动显示： none ' div class=' mapTipText mapTipText 0 ' div class=' mapTipImg ' img src=' http : images/黑龙江。jpg ' alt=' '//div class=' mapTipList ' h2a href=' '黑龙江跨度黑龙江/span/a/h2 ul lia href=' '哈尔滨/a/li lia href=' '漠河/a/li lia href=' '五大连池/a/li lia href=' '兴凯湖/a/li lia href=' '雪乡/a/li lia href=' '大兴安岭/a/li lia href=' '齐齐哈尔/a/li lia href=' '牡丹江/a/li lia href=' '伊春/a/li lia href=' '大庆/a/li lia href=' '镜泊湖/a/li lia href=' '帽儿山/a/Li/ul/div/div class=' mapTipText mapTipText 1 ' div class=' mapTipImg ' img src=' http : images/吉林。jpg ' alt=' '//div class=' mapTipList ' h2a href=' '吉林跨度吉林/span/a/h2 ul lia href=' '长白山/a/li lia href=' '长春/a/li lia href=' '延吉/a/li lia href=' '雾凇岛/a/li lia href=' '集安/a/li lia href=' '吉林市/a/li lia href=' '查干湖/a/li lia href=' '三角龙湾/a/li lia href=' '通化/a/li lia href=' '四平/a/li lia href=' '松原/a/li lia href=' '白城/a/Li/ul/div/div class=' mapTipText mapTipText 2 ' div class=' mapTipImg ' img src=' http : images/living。jpg ' alt=' '//div class=' mapTipList ' h2a href=' '辽宁跨度辽宁/span/a/h2 ul lia href=' '大连/a/li lia href=' '丹东/a/li lia href=' '沈阳/a/li lia href=' '兴城/a/li lia href=' '葫芦岛/a/li lia href=' '绥中/a/li lia href=' '旅顺/a/li lia href=' '锦州/a/li lia href=' '抚顺/a/li lia href=' '鞍山/a/li lia href=' '本溪/a/li lia href=' '营口/a/li lia href=' '盘锦/a/li lia href=' '长兴岛/a/Li/ul/div/div/body/html本代码暂时实现了几个悬停显示省市，其他的省市做法同理。

以上是jQuery地图悬停显示大家共享的省市代码。希望大家都能喜欢。