Question

您好我正在创建一个网页，我最终希望我的传单地图可以点击。但是我想在这里点击一下＆＃39;悬停时出现的地图上的图像。我通过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

Answer 1

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

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

Working Example

HTH， -Ted

在悬停上的传单地图上添加图像

1 个答案: