当用户将鼠标悬停在图像地图的一部分上时，我试图让div出现，我搜索了一下并找到了一个使用jQuery的例子但是我无法让它在我的生活中工作。
以下是我目前的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Interactive Map - Test</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.hidden {
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("area").hover(function () {
$place = $(this).attr("alt");
$(".place-default > div").addClass("hidden");
$($place).removeClass("hidden");
}, function(){
$(".place-default > div").addClass("hidden");
$("#place-1").removeClass("hidden");
});
});//]]>
</script>
</head>
<body>
<div class="place-default">
<div class="default" id="place-1">
<ul>
<h2 style="width: 431px">
Geographically Broken Down
</h2>
<p>
North East
<br>
Yorkshire and the Humber
<br>
North West
<br>
West Midlands
<br>
East Midlands
<br>
East of England
<br>
London
<br>
South East
<br>
South West
</p>
</ul>
</div>
<div class="hidden" id="place-2">
<ul>
<h2 style="width: 431px">
North East
</h2>
<p>
Durham
<br>
Northumberland
<br>
Redcar and Cleveland
<br>
Tyne and Wear
</p>
</ul>
</div>
<div class="hidden" id="place-3">
<ul>
<h2 style="width: 431px">
Yorkshire and the Humber
</h2>
<p>
East Riding of Yorkshire
<br>
North Lincolnshire
<br>
North Yorkshire
<br>
South Yorkshire
<br>
West Yorkshire
</p>
</ul>
</div>
<div class="hidden" id="place-4">
<ul>
<h2 style="width: 431px">
North West
</h2>
<p>
Cheshire
<br>
Cumbria
<br>
Greater Manchester
<br>
Lancashire
<br>
Merseyside
</p>
</ul>
</div>
<div class="hidden" id="place-5">
<ul>
<h2 style="width: 431px">
West Midlands
</h2>
<p>
Herefordshire
<br>
Shropshire
<br>
Staffordshire
<br>
Warwickshire
<br>
West Midlands
<br>
Worcestershire
</p>
</ul>
</div>
<div class="hidden" id="place-6">
<ul>
<h2 style="width: 431px">
East Midlands
</h2>
<p>
Derbyshire
<br>
Leicestershire
<br>
Lincolnshire
<br>
Northamptonshire
<br>
Nottinghamshire
<br>
Rutland
</p>
</ul>
</div>
<div class="hidden" id="place-7">
<ul>
<h2 style="width: 431px">
East of England
</h2>
<p>
Bedfordshire
<br>
Cambridgeshire
<br>
Essex
<br>
Hertfordshire
<br>
Norfolk
<br>
Suffolk
</p>
</ul>
</div>
<div class="hidden" id="place-8">
<ul>
<h2 style="width: 431px">
London
</h2>
<p>
Westminster
<br>
Canary Wharf
<br>
London City
<br>
Camden and Islington
<br>
Lambeth and Southwark
</p>
</ul>
</div>
<div class="hidden" id="place-9">
<ul>
<h2 style="width: 431px">
South East
</h2>
<p>
Berkshire
<br>
Buckinghamshire
<br>
East Sussex
<br>
Isle of Wight
<br>
Kent
<br>
Oxfordshire
<br>
Surrey
<br>
West Sussex
</p>
</ul>
</div>
<div class="hidden" id="place-10">
<ul>
<h2 style="width: 431px">
South West
</h2>
<p>
Bristol
<br>
Cornwall
<br>
Devon
<br>
Dorset
<br>
Gloucestershire
<br>
Isles of Scilly
<br>
Somerset
<br>
Wiltshire
</p>
</ul>
</div>
</div>
<div class="row"style="float: right">
<div class="col-sm-6 block">
<div class="box">
<h2 style="width: 337px" class="text-right">Nationwide<br></h2>
<img src="http://www.flash-map-shop.com/images/mapimages/EnglandRegion_Map.jpg" alt="" usemap="#Map" height="453" width="388" />
<map name="Map" id="Map">
<area alt="place-10" title="SW" shape="poly" coords="212, 297, 168, 306, 143, 358, 83, 361, 12, 440, 36, 445, 111, 433, 173, 404, 203, 396, 217, 352"/>
<area alt="place-9" title="SE"shape="poly" coords="214, 298, 258, 293, 268, 334, 275, 347, 291, 353, 304, 339, 324, 336, 343, 343, 359, 342, 361, 354, 336, 370, 324, 378, 310, 388, 307, 392, 275, 391, 249, 394, 222, 389, 210, 398"/>
<area alt="place-8" title="LON" shape="poly" coords="272, 326, 289, 322, 301, 329, 295, 344, 287, 348, 276, 341, 270, 336"/>
<area alt="place-7" title="EA" shape="poly" coords="258, 292, 300, 236, 352, 226, 368, 240, 363, 274, 348, 293, 334, 306, 324, 322, 319, 337, 284, 320, 269, 322"/>
<area alt="place-5"shape="poly" title="WM" coords="143, 225, 195, 203, 219, 257, 226, 283, 182, 296, 153, 305, 145, 289"/>
<area alt="place-6" title="EM" shape="poly" coords="197, 200, 198, 177, 212, 195, 233, 193, 246, 184, 275, 180, 288, 179, 297, 184, 300, 210, 292, 221, 291, 232, 295, 234, 291, 240, 247, 288, 231, 291"/>
<area alt="place-3" title="YH" shape="poly" coords="183, 108, 255, 103, 293, 165, 281, 179, 245, 181, 232, 191, 216, 192, 200, 176, 191, 168, 185, 142, 174, 135, 173, 129, 171, 128"/>
<area alt="place-2" title="place-2" shape="poly" coords="167, 48, 186, 27, 182, 7, 190, 3, 210, 19, 215, 51, 227, 88, 243, 96, 250, 100, 188, 106, 179, 85, 173, 76, 169, 77"/>
<area alt="place-4" title="NW" shape="poly" coords="165, 49, 133, 74, 119, 101, 140, 128, 155, 127, 151, 155, 142, 189, 152, 209, 158, 215, 191, 201, 195, 177"/>
</map>
</div>
</div>
</div>
</body>
</html>
非常感谢任何帮助
非常感谢crackruckles
答案 0 :(得分：2)
我认为@grow首先在评论中找到了，但这里的答案是答案。将jquery选择器更改为＆＃34;＃＆＃34; + $ place（我没有$更名为地方）
$("area").hover(function () {
place = $(this).attr("alt");
$(".place-default > div").addClass("hidden");
$('#'+place).removeClass("hidden");
}, function(){
$(".place-default > div").addClass("hidden");
$("#place-1").removeClass("hidden");
});
jsfiddle：http://jsfiddle.net/dq023ga7/