jquery - 在悬停时在传单 map 上添加图像

Question

您好，我正在创建一个网页，我最终希望我的传单 map 可点击。但我想在悬停时出现的 map 上显示“单击此处”图像。我通过 css 和 jquery 查找了以下问题的解决方案，但可以接近我想要的。

How to display image over image on hover with css

Jquery, add & remove element on hover

这是我的简化代码

css
body {
padding: 0px;
background-color: white;
}

div#map {
height: 300px;
width: 300px;
position: center;
border-color: #000000;
/* -moz-border-radius: 5px; */
/* -webkit-border-radius: 10px; */
border-radius: 30px;
/*box-shadow: 5px 5px 10px #888888;*/
z-index: 0;
}

#pattern {
text-align: center;
padding: 10px;
}

html
<div id="map">

</div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

js
var map = L.map('map').setView([40.7241745, -73.9841674], 11);

L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/    tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);

var mylayer = L.geoJson().addTo(map);

示例图片:http://nbchardballtalk.files.wordpress.com/2010/10/click-here-large2.jpg

Answer 1

将图像作为子元素添加到#map 元素，并将 :hover css 添加到#map，就像图像是#hand 一样:

#map #hand{display:none;} 
#map:hover #hand{display:block;}

Working Example

喂， -泰德