在悬停时在传单地图上添加图像答案

【问题标题】：add image on leaflet map on hover在悬停时在传单地图上添加图像
【发布时间】：2015-02-11 13:37:31
【问题描述】：

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

How to display image over image on hover with css

这是我的简化代码

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

【问题讨论】：

标签： jquery html css leaflet

【解决方案1】：

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

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

Working Example

HTH, -泰德

【讨论】：